Question

我正在尝试使用素数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的样式的属性不会出现在我页面中创建的样式中？

我该如何解决这个问题？

在我的页面上呈现的HTML与PrimeFaces展示页面不同

0 个答案: