New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

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

Comments

Projects
None yet
4 participants
@vpxavier

vpxavier commented Jul 18, 2012

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

@ghost ghost assigned jaspermdegroot Jul 18, 2012

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Jul 18, 2012

Member

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!

Member

jaspermdegroot commented Jul 18, 2012

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

This comment has been minimized.

Show comment
Hide comment
@vpxavier

vpxavier Jul 18, 2012

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.

vpxavier commented Jul 18, 2012

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

This comment has been minimized.

Show comment
Hide comment
@MauriceG

MauriceG Jul 18, 2012

Contributor

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

Contributor

MauriceG commented Jul 18, 2012

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

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Jul 18, 2012

Member

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

Member

jaspermdegroot commented Jul 18, 2012

@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

This comment has been minimized.

Show comment
Hide comment
@vpxavier

vpxavier Jul 23, 2012

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 commented Jul 23, 2012

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

This comment has been minimized.

Show comment
Hide comment
@vpxavier

vpxavier Jul 23, 2012

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

vpxavier commented Jul 23, 2012

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

@MauriceG

This comment has been minimized.

Show comment
Hide comment
@MauriceG

MauriceG Jul 23, 2012

Contributor

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

Contributor

MauriceG commented Jul 23, 2012

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

This comment has been minimized.

Show comment
Hide comment
@claitonlovato

claitonlovato Jul 23, 2012

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

claitonlovato commented Jul 23, 2012

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

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Jul 23, 2012

Member

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

Member

jaspermdegroot commented Jul 23, 2012

@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 added a commit that referenced this issue Jul 23, 2012

@vpxavier

This comment has been minimized.

Show comment
Hide comment
@vpxavier

vpxavier Jul 24, 2012

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

vpxavier commented Jul 24, 2012

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

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Aug 2, 2012

Member

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

Member

jaspermdegroot commented Aug 2, 2012

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

jaspermdegroot added a commit that referenced this issue Dec 25, 2012

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