Skip to content


Subversion checkout URL

You can clone with
Download ZIP


[JQM 1.1.1] Layout problem with toggle switch and radio control-group #4720

vpxavier opened this Issue · 11 comments

4 participants


Hello, since JQM 1.1.1
Some of my flip toggle switch are displaying the button too much to the right.

And some horizontal controlgroups radio buttons are displayed like if they have not enough width:

For your info, those are dynamically inserted.

Tested in Chrome and IE9 with Win 7 64bits


hi @vpxavier

Can you provide a test page so we can take a look at your code?
See template here


hi @uGoMobi ,
I can't as I don't want my code to be published but I can share my screen with you or I could try to reproduce on jsfiddle but it won't be easy for me.

More info:
This happens in a dynamic list inside a collapsible-set
Previous releases of JQM did not have this problem.

Let me know if we could arrange a shared screen session or if I have to be able to reproduce using jsfiddle.
Thanks a lot.


Hi @vpxavier

I have a fiddle for dynamic flip switches:
I cannot see a styling issue. I think an example of your code is required.




The issue with the radio button is probably a duplicate of #4716. See my comment there.

Regarding the flip-toggle switch. As @MauriceG his fiddle (thanks Maurice) shows they look as they are supposed to even when you programmatically add them. Tested with 1.1.1. final code as well:

I agree with Maurice that we need to see a sample that illustrates the issue to be able to look into it. I am sorry, but we can't do shared screen sessions.


Hello I'll try to do a jsfiddle but to do that I have to be able to reproduce...
I've just noticed that the data-mini version of the flip toggle switch does not have the layout problem.


Hello, I could reproduce the toggle switch problem here:


Hi @vpxavier

I don't think, having DIV / FORM tags or form elements inside an H-tag is valid HTML.
May you need your own CSS to get this work.



Hi all,
I am also having this problem using the Switch toggle inside a div grid. you can see the problem here:

this was not a problem on JQM 1.1.0 and its not a problem using the mini switch.



@vpxavier @claitonlovato

Thanks for the test pages.

I will commit a fix for the flip-toggle. In the meantime you can add this to your custom CSS:
div.ui-slider-switch .ui-slider-handle { margin: 1px 0 0 -15px; }.

The issue will be closed (the radio button issue is a duplicate of #4716).

@jaspermdegroot jaspermdegroot referenced this issue from a commit
@jaspermdegroot jaspermdegroot Slider: Avoid regression by setting all margins of the slider handle.…
… Fixes #4720 - Layout problem with toggle switch.

Thanks for the fix and work around.
The reason why I'm putting a form in my H tag is to be able to use components and custom layout as it is possible in the listviews but in a collapsible.
This is already in the wishlist.



@vpxavier - The issue with the radio button should be fixed if you test with latest code.

@jaspermdegroot jaspermdegroot referenced this issue from a commit
@jaspermdegroot jaspermdegroot Demos: Added grid example to sliders demo to test for regression (iss…
…ues #4944 and #4720). Adjusted values of rangeslider examples to make it easier to compare layout with slider.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.