Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
1490
ToggleSwitch not styled correctly
posted

I'm trying to create a ToggleSwitch from MVC and it shows up on the page but is not formatted/styled correctly (see attached image). I'm assuming I'm missing some css or js reference but can't quite seem to find what it is. Please note that other mobile IgniteUI controls (button) seem to be getting styled correctly on the same page, which makes me think I have the correct references - but the Toggle is not showing up the way I expect.

 

I'm referencing the following in my bundles:

 

bundles.Add(

new ScriptBundle("~/bundles/jquery").Include(

"~/Scripts/jquery-{version}.js").Include(

"~/Scripts/jquery.mobile-{version}.js"));

            bundles.Add(

new ScriptBundle("~/bundles/jqueryui").Include(

"~/Scripts/jquery-ui-{version}.js"));

            bundles.Add(

new ScriptBundle("~/bundles/jqueryval").Include(

"~/Scripts/jquery.unobtrusive*",

"~/Scripts/jquery.validate*"));

            bundles.Add(

new ScriptBundle("~/bundles/knockout").Include(

"~/Scripts/knockout-2.2.0.js"));

            bundles.Add(

new ScriptBundle("~/bundles/infragistics").Include(

"~/Scripts/IG/infragistics.core.js").Include(

"~/Scripts/IG/infragistics.lob.js").Include(

"~/Scripts/IG/mobile/infragistics.mobile.js"));

            bundles.Add(

new ScriptBundle("~/bundles/manhui").Include(

"~/Scripts/manh/webclient.js",

"~/Scripts/manh/webui.js", "~/Scripts/manh/manh.ui.*"));

            bundles.Add(

new ScriptBundle("~/bundles/modernizr").Include(

"~/Scripts/modernizr-*"));

            bundles.Add(

new StyleBundle("~/Content/manh/structure").Include(

"~/Content/manh/structure/manh.css"));

            bundles.Add(

new StyleBundle("~/Content/IG/themes").Include(

"~/Content/IG/themes/manh/infragistics.theme.css").Include(

"~/Content/IG/mobile/themes/windowsphone/light/infragistics.mobile.theme.css"));

            bundles.Add(

new StyleBundle("~/Content/IG/structure").Include(            

"~/Content/IG/structure/infragistics.css").Include(

"~/Content/IG/mobile/structure/infragistics.mobile.css"));

            bundles.Add(

new StyleBundle("~/Content/jquery").Include(

"~/Content/jquery.mobile.structure-{version}.css"));

 

 

And here is what I have in MVC code:

 

MvcHtmlString toggleSwitchHtml = HtmlHelperExtensions.InfragisticsMobile(this.Helper)

                .ToggleSwitch()

                .OnText(

"Yes")

                .OffText(

"No")

                .SwitchedState(

true)

                .Width(

"200px")

                .Render();

Parents
No Data
Reply
  • 37874
    posted

    Hello Ryan,

    I would suggest you to make sure that the scripts are added in the following order:

    1. modernizr 2. jquery 3. jquery.mobile 4. infragistics.mobile

    And the styles like this:

    1. jquery.mobile.structure 2. infragistics.mobile 3. infragistics.mobile.theme

    If the issue still occurs, please attach here a small sample, replicating the issue and I will be glad to look at it.

Children