选择后,Chrome浏览器中的JSF2 / Primefaces单选按钮移动

时间:2017-04-11 09:04:01

标签: twitter-bootstrap google-chrome primefaces jsf-2 radio-button

我正在使用bootstrap升级旧版JSF Web应用程序的外观。该应用程序使用JSF 2.1.7和primefaces 3.5构建。我在Chrome中如何显示单选按钮时遇到问题。

选定的单选按钮总是跳得更高,未选中的按钮会像海浪一样下降。屏幕截图如下。这个问题在Firefox中并不会发生。

如何阻止此行为?

selected radio butotn 1

selected radio button 2

JSF代码段

<ui:fragment rendered="true">
  <p:selectOneRadio id="zipOrAddress"
                 value="#{getDetails.zipPicked}"
                  required="true" layout="custom">
    <f:selectItem itemValue="false" />
    <f:selectItem itemValue="true" />

    <p:ajax event="change"
        process="@this"
        update="addressFields">
    </p:ajax>
  </p:selectOneRadio>

  <p:radioButton id="addrButton" for="zipOrAddress" itemIndex="0" />
  <h:outputText value="&#160;"></h:outputText>
  <h:outputLabel for="addrButton" value="Address" style="font-size:small;
   font-weight:bolder;"/>

  <h:outputText   
   value="&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;
   &#160;&#160;"> 
  </h:outputText>

  <p:radioButton id="zipButton" for="zipOrAddress" itemIndex="1"/>
  <h:outputText value="&#160;"></h:outputText>
  <h:outputLabel for="zipButton" value="ZipCode" style="font-size:small;
   font-weight:bolder;"/>

</ui:fragment>

呈现的HTML:

<td class=" content-column">
  <span id="mainForm:zipOrAddress"></span>
  <div id="mainForm:addrButton" class="ui-radiobutton ui-widget">
    <div class="ui-helper-hidden-accessible">
        <input id="mainForm:zipOrAddress:0" name="mainForm:zipOrAddress" 
          type="radio" value="false">
    </div>
    <div class="ui-radiobutton-box ui-widget ui-corner-all ui-state-
      default">
      <span class="ui-radiobutton-icon"></span>
    </div>
  </div>
  &nbsp;
  <label for="mainForm:addrButton" style="font-size:small;
   font-weight:bolder;">Address</label>
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <div id="mainForm:zipButton" class="ui-radiobutton ui-widget">
    <div class="ui-helper-hidden-accessible">
      <input id="mainForm:zipOrAddress:1" name="mainForm:zipOrAddress" 
        type="radio" value="true" checked="checked">
    </div>
    <div class="ui-radiobutton-box ui-widget ui-corner-all ui-state-
     default ui-state-active">
      <span class="ui-radiobutton-icon ui-icon ui-icon-bullet"></span>
    </div>
  </div>
  &nbsp;
  <label for="mainForm:zipButton" style="font-size:small;
  font-weight:bolder;">ZipCode</label>
</td>

非常感谢您提供的任何帮助。

0 个答案:

没有答案