Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

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

Closed
vpxavier opened this Issue · 11 comments

4 participants

@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

@jaspermdegroot
Collaborator

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.

@MauriceG

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

@jaspermdegroot
Collaborator

@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/

@MauriceG

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

@jaspermdegroot
Collaborator

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

@jaspermdegroot
Collaborator

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