Question

嗨我正试图垂直对齐两个元素

代码是

<h:panelGrid columns="2">
        <a4j:outputPanel layout="block">
            <h:form>
                <h:inputText id="text1" label="text1" value="#{opBean1.text}">
                    <f:validateLength maximum="10" />
                    <a4j:ajax event="keyup" execute="@this" render="out1" onerror="return false;" />
                </h:inputText><br/>
                <h:outputText id="out1" rendered="#{not empty opBean1.text}" value="Approved Text: #{opBean1.text}" />
            </h:form>
        </a4j:outputPanel>

        <a4j:outputPanel layout="block">
            <h:form>
                <h:inputText id="text2" label="text2" value="#{opBean1.text2}">
                    <f:validateLength maximum="10" />
                    <a4j:ajax event="keyup" execute="@this" render="out2" onerror="return false;" />
                </h:inputText><br/>
                <h:outputText id="out2" rendered="#{not empty opBean1.text2}" value="Approved Text: #{opBean1.text2}" />
            </h:form>
        </a4j:outputPanel>
</h:panelGrid>

如你所见， <h:panelGrid>包含两列。每列都有一个<a4j:outputPanel>元素。

问题是<a4j:outputPanel>的垂直尺寸可能会发生变化。（只有在托管bean opBean1中xxx值不为空时才会呈现<h:outputText id="xxx" rendered="#{not empty opBean1.xxx}" value="Approved Text: #{opBean1.xxx}" />元素。

因此，如果我在第一个a4j面板中输入一些文本，它将垂直包含两行，而另一个a4j面板将只包含一行。因此，对于第一个面板的文本字段，第二个面板的inputText字段将不再是aligne。

我知道如果没有任何图形表示，这可能很难理解，所以我会告诉你我的意思：在输入文字之前：

inputText1  inputText2

输入文字后：

inputText1
            inputText2
outputText1

我希望它是：

inputText1 inputText2

outputText1

编辑（对不起身份......我不知道如何让它变得更好）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"><head>

<title>Mission Page</title><link type="text/css" rel="stylesheet" href="/FlightFAQ/rfRes/skinning.ecss.jsf?db=eAHjW!XqPQAE!QKS" /><script type="text/javascript" src="/FlightFAQ/javax.faces.resource/jsf.js.jsf?ln=javax.faces&amp;stage=Development"></script><script type="text/javascript" src="/FlightFAQ/javax.faces.resource/jquery.js.jsf"></script><script type="text/javascript" src="/FlightFAQ/javax.faces.resource/richfaces.js.jsf"></script><script type="text/javascript" src="/FlightFAQ/javax.faces.resource/richfaces-base-component.js.jsf"></script><script type="text/javascript" src="/FlightFAQ/javax.faces.resource/richfaces-event.js.jsf"></script><script type="text/javascript" src="/FlightFAQ/javax.faces.resource/message.js.jsf?ln=org.richfaces"></script><link type="text/css" rel="stylesheet" href="/FlightFAQ/rfRes/msg.ecss.jsf?db=eAHjW!XqPQAE!QKS&amp;ln=org.richfaces" /></head><body><table>

<tbody>

<tr>

<td><div id="j_idt6">

<form id="j_idt7" name="j_idt7" method="post" action="/FlightFAQ/debug.jsf" enctype="application/x-www-form-urlencoded">

<input type="hidden" name="j_idt7" value="j_idt7" />

<span style="font-weight: bold;">Name: </span><input id="j_idt7:clientName" type="text" name="j_idt7:clientName" onblur="av_aea6d620643bb708da4bf66b58ae27d6(event,&quot;j_idt7:clientName&quot;,this)" />

<br /><span class="rf-msg " id="j_idt7:j_idt10"></span><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="-6739208697542802203:-2950524051097537124" autocomplete="off" />

</form></div></td>

<td><div id="j_idt11">

<form id="j_idt12" name="j_idt12" method="post" action="/FlightFAQ/debug.jsf" enctype="application/x-www-form-urlencoded">

<input type="hidden" name="j_idt12" value="j_idt12" />

<span style="font-weight: bold;">Contact: </span><input id="j_idt12:contact" type="text" name="j_idt12:contact" /><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="-6739208697542802203:-2950524051097537124" autocomplete="off" />

</form></div></td>

</tr>

</tbody>

</table>

<script type="text/javascript" src="/FlightFAQ/javax.faces.resource/richfaces-csv.js.jsf?ln=org.richfaces"></script><script type="text/javascript">

//<![CDATA[

window.av_aea6d620643bb708da4bf66b58ae27d6=function(event,id,e,da){var p={da:da,v:[{f:RichFaces.csv.validateRequired,p:{} ,m:{"detail":"name cannot be null","severity":0,"summary":"name cannot be null"} }]};

RichFaces.csv.validate(event,id,e,p);

}

$(document).ready(function() {

new RichFaces.ui.Message("j_idt7:j_idt10",{"forComponentId":"j_idt7:clientName","showSummary":false,"showDetail":true} )

});



//]]>

</script></body>

</html>

Answer 1

它可以工作，遵循以下链接示例： https://community.jboss.org/thread/14384

内容更改时的垂直对齐方式

1 个答案: