0
你好我想垂直对齐两个元素当内容发生变化
垂直对齐的代码是
<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>的垂直尺寸可能会改变。 （<h:outputText id="xxx" rendered="#{not empty opBean1.xxx}" value="Approved Text: #{opBean1.xxx}" />元素仅在被管理bean opBean1中的xxx值不为空时呈现）
所以如果我在第一个a4j面板中输入一些文本，它将包含两行垂直，而另一个a4j面板将只包含一个。 因此，第二个面板的inputText字段将不会与第一个面板的文本字段相同。
我知道这可能是硬盘没有任何图形表示理解，所以我会告诉你我是什么意思： 前输入文本：
inputText1
inputText2
outputText1
：
inputText1 inputText2
输入文本后我希望它是：
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&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&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,"j_idt7:clientName",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>
你希望人们来解决客户端的问题，但你只显示你的服务器端代码。 – 2013-02-14 22:30:05
除了最后的小“视觉”示例之外，我还能展示什么？ – facewindu 2013-02-14 22:33:14
显示您生成的HTML + CSS。这就是浏览器所看到的，这也是我们需要看到的。 – 2013-02-14 22:34:31