Created by: epidemian
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:
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:
And on 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!