twbs/bootstrap — pull request #12794 by epidemian (2014-02-19 20:40:10+00:00)
Title: Fix UAs required message position on grouped radio buttons

This PR fixes the positioning of the required error message shown by user agents when using the `required` attribute on radio buttons inside a [`btn-group` button group](http://getbootstrap.com/javascript/#buttons).

[JSFiddle example](http://jsfiddle.net/epidemian/LhN44/) showcasing the problem. On Firefox the required message is rendered in bizarre places:

![firefox-bad](https://f.cloud.github.com/assets/722544/2211315/66db4f82-99a4-11e3-87fe-0fd6c80520ca.png)

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](http://jsfiddle.net/epidemian/LWRvQ/). On firefox:

![firefox-good](https://f.cloud.github.com/assets/722544/2211316/6d2d3ba2-99a4-11e3-8b04-e36b0942f8fd.png)

And on Chrome:

![chrome](https://f.cloud.github.com/assets/722544/2211318/72822ebe-99a4-11e3-813d-baa98e05ac5c.png)

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 button 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" :sweat_smile:

Cheers!