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链接中某些 s 上的样式具有在我的页面中创建的样式中没有出现的属性？

我该如何解决？

4

0 回答 0