Grails - 未应用CSS规则

Question

我正在开发一个Grails应用程序，我遇到了应用于视图的CSS规则的问题。考虑一下这个GSP代码：

<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>

这是结果：

视图中使用了两个CSS类：

1. fieldcontain，这是Grails提供的默认CSS。
2. ui-button，在JQuery UI Lightness文件中声明 （jquery的-UI-1.10.3.custom.css）

正如您所看到的那样， Naturaleza Mineral 单选按钮没有 Tipo De Mineral 单选按钮的外观，考虑到两者都应用相同的CSS规则单选按钮组。

为什么会这样？

Answer 1

这是因为您通过调用buttonset()从javascript启用了jquery-ui单选按钮样式：

$( "#radio, #radio2" ).buttonset();

关注此弹射器example。