smokeyworm
New Member
I'm trying to use a primefaces Element Layout.I've inserted the code that was provided in the above link to my xhtml page (so that code is now nested within other primefaces components...).Here is the code that I got from the above link:<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> However, the layout is not rendered properly. For example, it has "visibility: hidden;".I tried to compare the html in the above link, to the html that was created in my page.Here is the relevant html that is created in the above link:<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>Here is the html that is created in my page:<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>So that explains to me why the Layout does not work on my page.But why does the same JSF code create different html (if you ignore that different id's, which make sense)?Why does the style on some of the divs in the link have properties which do not appear in the style created in my page?How do I fix this?