Вертикальное выравнивание при изменении содержимого

Привет я пытаюсь выровнять по вертикали два элемента

Код

<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> может измениться. (The <h:outputText id="xxx" rendered="#{not empty opBean1.xxx}" value="Approved Text: #{opBean1.xxx}" /> элемент отображается только в том случае, если значение xxx не является пустым в управляемом компоненте opBean1)

Поэтому, если я введу какой-то текст в первую панель a4j, он будет содержать две строки по вертикали, тогда как другая панель a4j будет содержать только одну. Следовательно, поле inputText второй панели больше не будет выравниваться с текстовым полем первой панели.

Я знаю, что это может быть трудно понять без какого-либо графического представления, поэтому я покажу вам, что я имею в виду: Перед вводом текста:

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>
Источник

1 ответ

Решение

Это работает, следуя этому примеру ссылки: https://community.jboss.org/thread/14384

Источник
Другие вопросы по тегам