切换按钮上下移动一点

时间:2014-01-29 13:47:34

标签: css jsf jsf-2 primefaces

我有一个像这样的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

下面的一些截图

切换之前

enter image description here

切换后

enter image description here

自定义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;
 }

0 个答案:

没有答案