Skip to content
This repository

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

Closed
vpxavier opened this Issue July 18, 2012 · 11 comments

4 participants

vpxavier Jasper de Groot Maurice Gottlieb claitonlovato
vpxavier

Hello, since JQM 1.1.1
Some of my flip toggle switch are displaying the button too much to the right.
Examples:
http://imageshack.us/photo/my-images/196/capturerek.jpg
http://img94.imageshack.us/img94/1082/capturectq.jpg

And some horizontal controlgroups radio buttons are displayed like if they have not enough width:
http://img339.imageshack.us/img339/484/capturezqc.jpg

For your info, those are dynamically inserted.

Tested in Chrome and IE9 with Win 7 64bits
Regards,
Xavier

Jasper de Groot
Owner

hi @vpxavier

Can you provide a test page so we can take a look at your code?
See template here https://github.com/jquery/jquery-mobile#issues
Thanks!

vpxavier

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.

Maurice Gottlieb

Hi @vpxavier

I have a fiddle for dynamic flip switches: http://jsfiddle.net/MauriceG/uYFkt/show/light/
I cannot see a styling issue. I think an example of your code is required.

Maurice

Jasper de Groot
Owner

@vpxavier

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: http://jsfiddle.net/zY3Ms/1/

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.

vpxavier

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.

vpxavier

Hello, I could reproduce the toggle switch problem here: http://jsfiddle.net/vpxavier/zK3Vg/

Maurice Gottlieb

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.

Maurice

claitonlovato

Hi all,
I am also having this problem using the Switch toggle inside a div grid. you can see the problem here: http://jsfiddle.net/bVE7B/1/

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

Claiton

Jasper de Groot
Owner

@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).

Jasper de Groot uGoMobi closed this issue from a commit July 23, 2012
Jasper de Groot Slider: Avoid regression by setting all margins of the slider handle.…
… Fixes #4720 - Layout problem with toggle switch.
811393e
Jasper de Groot uGoMobi closed this in 811393e July 23, 2012
Jasper de Groot uGoMobi referenced this issue from a commit July 23, 2012
Jasper de Groot Slider: Avoid regression by setting all margins of the slider handle.…
… Fixes #4720 - Layout problem with toggle switch.
fcb1298
vpxavier

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.

Regards

Jasper de Groot
Owner

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

Jasper de Groot uGoMobi referenced this issue from a commit December 25, 2012
Jasper de Groot 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.
2da649f
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.