我有一个像这样的JSF代码段
<p:panel>
<h:panelGrid columns="3">
<!--(other components here)-->
<h:panelGroup id="locked1" layout="block">
<p:outputLabel id="labelp1" for="password1" value="Password:" style="width:100px;"
rendered="#{!myMB.showPassword}"/>
</h:panelGroup>
<h:panelGroup id="locked2" layout="block">
<p:password redisplay="true" id="password1" value="#{myMB.decryptedPassword}"
rendered="#{!myMB.showPassword}"/>
</h:panelGroup>
<h:panelGroup id="locked3" layout="block">
<p:commandButton icon="ui-icon-unlocked" action="#{myMB.togglePassword}"
rendered="#{!myMB.showPassword}"
update="locked1,locked2,locked3,unlocked1,unlocked2,unlocked3"/>
</h:panelGroup>
<h:panelGroup id="unlocked1" layout="block">
<p:outputLabel id="labelp2" for="password2" value="Password:"
style="width:100px;" rendered="#{myMB.showPassword}"/>
</h:panelGroup>
<h:panelGroup id="unlocked2" layout="block">
<p:inputText id="password2" value="#{myMB.decryptedPassword}"
rendered="#{myMB.showPassword}"/>
</h:panelGroup>
<h:panelGroup id="unlocked3" layout="block">
<p:commandButton icon="ui-icon-locked" action="#{myMB.togglePassword}"
rendered="#{myMB.showPassword}"
update="locked1,locked2,locked3,unlocked1,unlocked2,unlocked3"/>
</h:panelGroup>
<!--(other components here)-->
</h:panelGrid>
</p:panel>
它可以工作,但是当我点击按钮“切换”密码时,似乎有一个非常小的高度差异,所以它似乎在窗体内上下移动一点点。
当然,我尝试的第一件事是两个面板,但由于它是一个3列的布局,它正在打破它。
我该如何解决这个问题?
欢迎不如我的愚蠢解决方案: - )
TIA
更新我在primefaces 4中测试,firefox 24
下面的一些截图
切换之前
切换后
自定义css
body {
background-color: #ffffff;
}
.ui-inputfield {
width:300px;
}
.clean td{
border: 0;
background:#ffffff;
}
.clean tr{
border: 0;
background:#ffffff;
}
.clean{
border: 0;
background:#ffffff;
}
/* smaller fonts - careful not to be too small or it will mess up p:menuitem*/
.ui-widget {
font-size: 90%;
}
.ui-widget .ui-widget {
font-size: 100%;
}
.ui-widget, .ui-widget .ui-widget {
font-size: 90% !important;
}