Toogle Checkboxes

[Aurora]

Hey Guys!

 

Does anyone know how to create Toogle Checkboxes? 

 

Thanks 

 

 

Aurora

[iren]

Hello Aurora,

 

You can paste the following code

in Header: 

<script src="[@app:URL_5]"></script>
<script src="[@app:URL_3]"></script>
<link href="[@app:URL_1]" rel="stylesheet" >
<link href="[@app:URL_4]" rel="stylesheet">
<link href="[@app:URL_2]" rel="stylesheet">
<style>
.checkbox label .toggle,
.checkbox-inline .toggle {
 ;
 margin-right: 5px;
}

.toggle {
 position: relative;
 overflow: hidden;
}
.toggle input[type="checkbox"] {
 display: none;
}
.toggle-group {
 position: absolute;
 width: 200%;
 top: 0;
 bottom: 0;
 left: 0;
 transition: left 0.35s;
 -webkit-transition: left 0.35s;
 -moz-user-select: none;
 -webkit-user-select: none;
}
.toggle.off .toggle-group {
 left: -100%;
}
.toggle-on {
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right: 50%;
 margin: 0;
 border: 0;
 border-radius: 0;
}
.toggle-off {
 position: absolute;
 top: 0;
 bottom: 0;
 left: 50%;
 right: 0;
 margin: 0;
 border: 0;
 border-radius: 0;
}
.toggle-handle {
 position: relative;
 margin: 0 auto;
 padding-top: 0px;
 padding-bottom: 0px;
 height: 100%;
 width: 0px;
 border-width: 0 1px;
}

.toggle.btn { min-width: 59px; min-height: 34px; }
.toggle-on.btn { padding-right: 24px; }
.toggle-off.btn { padding-left: 24px; }

.toggle.btn-lg { min-width: 79px; min-height: 45px; }
.toggle-on.btn-lg { padding-right: 31px; }
.toggle-off.btn-lg { padding-left: 31px; }
.toggle-handle.btn-lg { width: 40px; }

.toggle.btn-sm { min-width: 50px; min-height: 30px;}
.toggle-on.btn-sm { padding-right: 20px; }
.toggle-off.btn-sm { padding-left: 20px; }

.toggle.btn-xs { min-width: 35px; min-height: 22px;}
.toggle-on.btn-xs { padding-right: 12px; }
.toggle-off.btn-xs { padding-left: 12px; }

header, footer {
 padding: 20px;
 background-image: url('header.png');
 background-size: 256px 256px;
}
footer {
 color: #fff;
 text-align: center;
}
.nyt-logo {
 max-height: 40px;
 margin-top: 5px;
 margin-right: 5px;
}

nav.navbar {
 margin-bottom: 10px;
 background-color: #fff;
 border: 0px;
 border-radius: 2px;
}
#navbar {
 margin: 0px;
}
#navbar .navbar-nav li iframe {
 margin-top: 15px;
}
#navbar .navbar-nav li:last-child iframe {
 margin-right: 15px;
}

@media screen and (max-width: 767px) {
 #navbar .navbar-nav li iframe {
  display: none;
 }
}

.mast-head {
 margin: 10px 0;
}
.mast-head h1 {
 margin-bottom: 15px;
 color: #fff;
}
.mast-head p {
 color: #fff;
}

.mast-links {
 padding-top: 10px;
}

.mast-links > * {
 vertical-align: middle;
 margin-bottom: 10px;
}

.mast-links > .btn {
 margin-right: 30px;
}
main {
 margin: 10px 20px;
}
main .container {
 margin-bottom: 40px;
}

code.hljs {
 border: 1px solid #ccc;
 padding: 1em;
 white-space: pre;
 margin-bottom: 10px;
}

.example {
 position: relative;
 border: 1px solid #ccc;
 padding: 1em 1em 0.5em 1em;
 border-radius: 4px 4px 0 0;
}

.example:after {
 content: "Example";
 position: absolute;
 top: 0px;
 right: 0px;
 padding: 3px 7px;
 font-size: 12px;
 font-weight: bold;
 background-color: #f5f5f5;
 border: 1px solid #ccc;
 color: #9da0a4;
 border-radius: 0px 4px 0px 4px;
 border-width: 0px 0px 1px 1px;
}

.example + code.hljs {
 border-top: 0;
 border-radius: 0px 0px 4px 4px;
}

.example > * {
 margin-bottom: 10px;
}

.example > div.toggle {
 margin-right: 10px;
}

.table-striped code {
 background-color: inherit;
}
</style>

and in Footer:

<script>
  $(function() {
    $('#InsertRecordyour_field').bootstrapToggle();
  })
</script>

Enter name of your field instead of your_field. 

 

Hope it helps.

[kenanjones]

Looking for this solution as well.  I wasn't able to make this work.  What files are you using in the App Parameters for bootstrap toggle ?

[iren]

Hello kenanjones,

 

Please change it:

<script src="[@app:URL_5]"></script>
<script src="[@app:URL_3]"></script>
<link href="[@app:URL_1]" rel="stylesheet" >
<link href="[@app:URL_4]" rel="stylesheet">
<link href="[@app:URL_2]" rel="stylesheet">

into:

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.3/styles/github.min.css"></script>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.0/js/bootstrap-toggle.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.3/styles/github.min.css" rel="stylesheet" >
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

in your script.

 

Hope it helps.