CODEWITHSUNDEEP
htmltwitter-bootstrapcheckboxtwitter-bootstrap-3
James
James

Reputation: 1501

Bootstrap Toggle still displaying as a checkbox

I am trying to implement a toggle switch using http://www.bootstraptoggle.com/

I have added the following into my page:

<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>

and simply implemented the toggle switch using:

<input id="toggle-demo" type="checkbox" checked data-toggle="toggle">

<script type="text/javascript">
$(function() {
    $('#toggle-demo').bootstrapToggle()
})
</script>

Also, here's my bundle config:

public class BundleConfig
{
    // For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862
    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.validate*"));

        // Use the development version of Modernizr to develop with and learn from. Then, when you're
        // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
        bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                    "~/Scripts/modernizr-*"));

        bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                  "~/Scripts/bootstrap.js",
                  "~/Scripts/respond.js"));

        bundles.Add(new StyleBundle("~/Content/css").Include(
                  "~/Content/bootstrap.css",
                  "~/Content/site.css"));
    }
}

However, it still displays as a checkbox and not the toggle switch, any ideas? Thanks :)

Upvotes: 0

Views: 1285

Answers (1)

mrid
mrid

Reputation: 5796

Why go for a plugin when you can build your own with a little code ?

#foo:checked::before,
input[type="checkbox"] {
    position:absolute;
    clip: rect(0,0,0,0);
    clip: rect(0 0 0 0);
}

input[type="checkbox"] + label {
    margin-left: 100px; line-height: 30px; height: 27px; cursor: pointer;
    -webkit-transition: background-position 0.3s ease-in-out;
    -moz-transition: background-position 0.3s ease-in-out;
}

#foo:checked,
input[type="checkbox"] + label::before {
    content: ""; width: 94px; height: 27px;
    background: url(http://dl.dropbox.com/u/391082/sprite2.png) -56px 0;
    position: absolute;
    border-radius: 4px;
    -webkit-transition: background-position 0.3s ease-in-out;
    -moz-transition: background-position 0.3s ease-in-out;
}

input[type="checkbox"]:checked + label::before {
    background-position: -3px 0;
}

input[type="checkbox"] + label:hover::before {
    background-position: -50px 0;
    border-right: solid 1px rgba(0,0,0,.3);
    width: 93px;
}

input[type="checkbox"]:checked + label:hover::before {
    background-position: -9px 0;
    border-left: solid 1px rgba(0,0,0,.3);
    width: 93px;
}
<input id=test type=checkbox value=test checked>
<label for=test>Label</label>

Upvotes: 1

Related Questions