0

こんにちは、2 つの要素を垂直方向に揃えようとしています

コードは

<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>は 2 つの列が含まれています。各列には<a4j:outputPanel>要素があります。

問題は、<a4j:outputPanel>缶の縦サイズが変わることです。(この<h:outputText id="xxx" rendered="#{not empty opBean1.xxx}" value="Approved Text: #{opBean1.xxx}" />要素は、マネージド Bean opBean1 で xxx 値が空でない場合にのみレンダリングされます)

したがって、最初の a4j パネルにテキストを入力すると、縦に 2 行が含まれますが、他の a4j パネルには 1 行しか含まれません。したがって、2 番目のパネルの 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>
4

0 に答える 0