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

checkboxradio: add CSS when using <legend> with a checkbox/label #7453

Closed
frequent opened this Issue Jun 1, 2014 · 7 comments

Comments

Projects
None yet
4 participants
@frequent
Contributor

frequent commented Jun 1, 2014

When doing a form, it's nice to align labels and inputs as JQM does. However when the form includes a checkbox the logic breaks, because the checkboxradio widget needs the <label> element for the ui.

See here

This can be fixed by using a fieldset/legend with the checkbox, but the legend element is missing the CSS analogue to the label:

See here

which can be fixed by including legends in the respective label CSS.

See here

If I'm misuing legend please close and I will keep custom overwriting. Otherwise would be nice to have out of the box.

@jaspermdegroot jaspermdegroot added this to the 1.5.0 milestone Jun 1, 2014

@jaspermdegroot jaspermdegroot self-assigned this Jun 1, 2014

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Jun 1, 2014

Member

@frequent

Thanks. I agree it would be useful if you can apply the same style to a legend. I will look into it for 1.5.

Member

jaspermdegroot commented Jun 1, 2014

@frequent

Thanks. I agree it would be useful if you can apply the same style to a legend. I will look into it for 1.5.

@ldeluca

This comment has been minimized.

Show comment
Hide comment
@ldeluca

ldeluca Oct 23, 2014

Contributor

@jaspermdegroot @frequent checkboxradio is deprecated but I see that it's marked as a 1.5 milestone and has the component:fieldcontain assigned to it. I'm kinda confused by the title. Can you guys confirm that this is NOT related to checkboxradio? ...we're doing some issue cleanup today so apologizes if this is legit.

Contributor

ldeluca commented Oct 23, 2014

@jaspermdegroot @frequent checkboxradio is deprecated but I see that it's marked as a 1.5 milestone and has the component:fieldcontain assigned to it. I'm kinda confused by the title. Can you guys confirm that this is NOT related to checkboxradio? ...we're doing some issue cleanup today so apologizes if this is legit.

@frequent

This comment has been minimized.

Show comment
Hide comment
@frequent

frequent Oct 23, 2014

Contributor

@ldeluca - pre 1.5 you'd have <label> + <input> to make nice looking 2-column forms. For checkbox and radio however, the <label> element was used to create the actual checkbox. This is why I proposed to use the <fieldset> as "replacement" for the label element not being available for "labeling". If the new checkbox allows the label element to be used as actual label, then you could close. I have not looked at the latest code, so I can't tell. Sorry.

Contributor

frequent commented Oct 23, 2014

@ldeluca - pre 1.5 you'd have <label> + <input> to make nice looking 2-column forms. For checkbox and radio however, the <label> element was used to create the actual checkbox. This is why I proposed to use the <fieldset> as "replacement" for the label element not being available for "labeling". If the new checkbox allows the label element to be used as actual label, then you could close. I have not looked at the latest code, so I can't tell. Sorry.

@arschmitz

This comment has been minimized.

Show comment
Hide comment
@arschmitz

arschmitz Oct 23, 2014

Member

@ldeluca @frequent no the label is still used for the checkbox button. There is one major accessibility issue with using legends the way you suggest though. Which is that labels are expected to toggle the input when clicked so styling the legend as a label will lead people to believe it should be clickable.

The reason we use the label for the button is accessibility related as well. I'd want to check with @dylanb here on other potential issues i'm not thinking of but a work around with this type of styling would be to proxy clicks on the legend to the label. not something we would be likely to do in the lib but maybe a demo.

Member

arschmitz commented Oct 23, 2014

@ldeluca @frequent no the label is still used for the checkbox button. There is one major accessibility issue with using legends the way you suggest though. Which is that labels are expected to toggle the input when clicked so styling the legend as a label will lead people to believe it should be clickable.

The reason we use the label for the button is accessibility related as well. I'd want to check with @dylanb here on other potential issues i'm not thinking of but a work around with this type of styling would be to proxy clicks on the legend to the label. not something we would be likely to do in the lib but maybe a demo.

@arschmitz

This comment has been minimized.

Show comment
Hide comment
@arschmitz

arschmitz Jul 2, 2015

Member

So we have had a lot of discussion about this and the new widget in jQuery UI and the decision is that this is OK though we will also be supporting the use of multiple labels so that it can still be toggled via label if you like or not via using a legend.

Member

arschmitz commented Jul 2, 2015

So we have had a lot of discussion about this and the new widget in jQuery UI and the decision is that this is OK though we will also be supporting the use of multiple labels so that it can still be toggled via label if you like or not via using a legend.

arschmitz added a commit to arschmitz/jquery-mobile that referenced this issue Jul 2, 2015

arschmitz added a commit to arschmitz/jquery-mobile that referenced this issue Jul 2, 2015

@frequent

This comment has been minimized.

Show comment
Hide comment
@frequent

frequent Jul 2, 2015

Contributor

Cool. Thanks a lot. And sorry for not being so active for the last .... eternity or such. Just too much other stuff going on but I'm trying to read along and keep up to date.

Contributor

frequent commented Jul 2, 2015

Cool. Thanks a lot. And sorry for not being so active for the last .... eternity or such. Just too much other stuff going on but I'm trying to read along and keep up to date.

@arschmitz

This comment has been minimized.

Show comment
Hide comment
@arschmitz

arschmitz Jul 2, 2015

Member

@frequent I did a PR for it already so this will be in 1.5 Sorry it took so long we went through several rounds of consultation trying to get a real answer on this.

No worries help is always welcome when you have time :-)

Member

arschmitz commented Jul 2, 2015

@frequent I did a PR for it already so this will be in 1.5 Sorry it took so long we went through several rounds of consultation trying to get a real answer on this.

No worries help is always welcome when you have time :-)

@arschmitz arschmitz closed this Jul 23, 2015

arschmitz added a commit to arschmitz/jquery-mobile that referenced this issue Jul 4, 2016

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment