Skip to content
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鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix UAs required message position on grouped radio buttons #12794

Merged
merged 1 commit into from Mar 7, 2014

Conversation

Projects
None yet
3 participants
@epidemian
Copy link

epidemian commented Feb 19, 2014

This PR fixes the positioning of the required error message shown by user agents when using the required attribute on radio inputs inside a btn-group button group.

JSFiddle example showcasing the problem. On Firefox the required message is rendered in bizarre places:

firefox-bad

And on Chrome the message is not shown. An error is logged to the console instead: "An invalid form control with name='options' is not focusable."

JSFiddle example with fix. On firefox:

firefox-good

And on Chrome:

chrome

The fix/hack is basically, instead of not rendering the element at all with display:none, using opacity:0, position:absolute and z-index:-1 so the radio input element has a defined position on the document and user agents can show the required message in the right place but at the same time it is invisible and doesn't affect the position of other elements.

Disclaimer: i only tested this in Firefox and Chrome on Ubuntu, and i don't know if those CSS properties are the best to "make an element have a position but be invisible" 馃槄

Cheers!

Demian Ferreiro
Fix UAs required message position on grouped radio buttons
Instead of not rendering the element at all with display:none, use opacity:0 and z-index:-1 so the radio element has a defined position on the document and user agents can show the required message in the right place.

@cvrebert cvrebert added the css label Feb 19, 2014

@cvrebert cvrebert added this to the v3.2.0 milestone Feb 19, 2014

mdo added a commit that referenced this pull request Mar 7, 2014

Merge pull request #12794 from epidemian/required-radio-button-groups
Fix UAs required message position on grouped radio buttons

@mdo mdo merged commit f5f4a2d into twbs:master Mar 7, 2014

1 check passed

default The Travis CI build passed
Details
@mdo

This comment has been minimized.

Copy link
Member

mdo commented Mar 7, 2014

Verified the bug and fix on Firefox and Chrome OS X.

@mdo mdo referenced this pull request Mar 7, 2014

Closed

v3.2.0 ship list #12736

mdo added a commit that referenced this pull request Mar 7, 2014

@epidemian epidemian deleted the epidemian:required-radio-button-groups branch Mar 17, 2014

stempler pushed a commit to stempler/bootstrap that referenced this pull request Nov 4, 2014

(less) Merge pull request twbs#12794 from epidemian/required-radio-bu鈥
鈥ton-groups

Fix UAs required message position on grouped radio buttons

stempler pushed a commit to stempler/bootstrap that referenced this pull request Nov 4, 2014

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can鈥檛 perform that action at this time.