0

primefaces Element Layoutを使用しようとしています。

上記のリンクで提供されたコードを xhtml ページに挿入しました (そのため、コードは他の primefaces コンポーネント内にネストされます...)。

上記のリンクから取得したコードは次のとおりです。

<p:layout style="min-width:400px;min-height:200px;" id="layout">  
    <p:layoutUnit position="west" resizable="true" size="100" minSize="40" maxSize="200">  
        West  
    </p:layoutUnit>  

    <p:layoutUnit position="center">  
        Center  
    </p:layoutUnit>  
</p:layout>

ただし、レイアウトは正しくレンダリングされません。たとえば、 があり"visibility: hidden;"ます。

上記のリンクの html と、自分のページで作成された html を比較してみました。

上記のリンクで作成された関連する html は次のとおりです。

<div id="layout" class="ui-layout-container" style="min-width: 400px; min-height: 200px; overflow: visible; position: relative;">
    <div id="j_idt18" class="ui-layout-unit ui-widget ui-widget-content ui-corner-all ui-layout-west ui-layout-pane ui-layout-pane-west" style="position: absolute; margin: 0px; left: 0px; right: auto; top: 0px; bottom: 0px; height: 194px; z-index: 0; width: 94px; display: block; visibility: visible;">
        <div class="ui-layout-unit-content ui-widget-content" style="position: relative; height: 191px; visibility: visible;"> West </div>
    </div>
    <div id="j_idt20" class="ui-layout-unit ui-widget ui-widget-content ui-corner-all ui-layout-center ui-layout-pane ui-layout-pane-center" style="position: absolute; margin: 0px; left: 107px; right: 0px; top: 0px; bottom: 0px; height: 194px; width: 792px; z-index: 0; display: block; visibility: visible;">
        <div class="ui-layout-unit-content ui-widget-content" style="position: relative; height: 191px; visibility: visible;"> Center </div>
    </div>
    <div id="j_idt18-resizer" class="ui-layout-resizer ui-layout-resizer-west ui-layout-resizer-open ui-layout-resizer-west-open" style="position: absolute; padding: 0px; margin: 0px; font-size: 1px; text-align: left; overflow: hidden; z-index: 2; cursor: w-resize; left: 100px; height: 201px; width: 6px; top: 0px;" title="Resize" aria-disabled="false"></div>
</div>

私のページで作成されたhtmlは次のとおりです。

<div id="form:tabView:tabViewExceptions:layout" style="min-width:400px;min-height:200px;">
    <div id="form:tabView:tabViewExceptions:j_idt113" class="ui-layout-unit ui-widget ui-widget-content ui-corner-all ui-layout-west">
        <div class="ui-layout-unit-content ui-widget-content"> West </div>
    </div>
    <div id="form:tabView:tabViewExceptions:j_idt115" class="ui-layout-unit ui-widget ui-widget-content ui-corner-all ui-layout-center">
        <div class="ui-layout-unit-content ui-widget-content"> Center </div>
    </div>
</div>

これで、私のページでレイアウトが機能しない理由がわかりました。

しかし、同じ JSF コードが別の html を作成するのはなぜでしょうか (その別の ID を無視すると、意味があります)。

リンク内の一部の のdivスタイルに、自分のページで作成したスタイルに表示されないプロパティがあるのはなぜですか?

これを修正するにはどうすればよいですか?

4

0 に答える 0