i'm developing grails app , i'm having problem css rules applied view. consider gsp code:
<div id="radio" style="height: 30px"> <div class="fieldcontain"> <label style="float: left; width: 25%; overflow: hidden"> <g:message code="recepciondecomplejoinstance.tipodemineral.label" default="tipo de mineral" /> </label> </div> <div class="ui-button" style="float: left; width: 75%; overflow: hidden; text-align: start"> <input type="radio" id="radiocomplejo" value="complejo" name="radio" checked="checked"><label for="radiocomplejo">complejo</label> <input type="radio" id="radioplomoplata" value="plomoplata" name="radio"><label for="radioplomoplata">pb-ag</label> <input type="radio" id="radiozincplata" value="zincplata" name="radio"><label for="radiozincplata">zn-ag</label> <input type="radio" id="radiocobreplata" value="cobreplata" name="radio"><label for="radiocobreplata">cu-ag</label> </div> </div> <div id="radio2" style="height: 30px"> <div class="fieldcontain"> <label style="float: left; width: 25%; overflow: hidden"> <g:message code="recepciondecomplejoinstance.naturalezamineral.label" default="naturaleza mineral" /> </label> </div> <div class="ui-button" style="float: left; width: 50%; overflow: hidden; text-align: start"> <input type="radio" id="radiosulfuro" value="sulfuro" name="radio2" checked="checked"><label for="radiosulfuro">sulfuro</label> <input type="radio" id="radiooxido" value="oxido" name="radio2"><label for="radiooxido">oxido</label> </div> </div> this result: 
there 2 css classes used in view:
fieldcontain, default css provided grails.ui-button,declared in jquery ui lightness file (jquery-ui-1.10.3.custom.css)
as can see naturaleza mineral radio buttons don't have appearance of tipo de mineral radio button considering same css rules being applied both radio button groups.
why happening?
it because have enable jquery-ui radio button style javascript calling buttonset():
$( "#radio, #radio2" ).buttonset(); follow plunker example.
Comments
Post a Comment