p:页面加载时混合布局

时间:2015-05-19 14:00:40

标签: css jsf layout primefaces

我正在使用Primefaces 4.0和Mojarra 2.2.7。 在我的项目中,我有这个页面<p:layout>和两个<p:layoutUnit>,它们与滚动面板有一个奇怪的行为。 当页面加载时,它看起来像这样:

Not desired behavior

如果你看到箭头,右边的布局单元就像是重叠左边的那个,还有一个额外的滚动条可以滚动<p:layoutUnit>,这让我觉得它们在页面加载时会以某种方式合并为一个。 当我“移动”组件时,无论如何,如放大或缩小,两个<p:layoutUnit>分开,形成我想要的行为。如果您在顶部箭头上看到,左边是<p:layoutUnit>的新滚动条,第一张图像上的右滚动消失了。

Desired behavior

该页面的代码如下所示:

        <p:layout style="min-width:400px;min-height:1000px;" styleClass="backgroundless">
            <p:layoutUnit position="center" size="620" >
                <p:tabView id="tabView">   
                    <c:forEach items="#{tareaController.mfuncionesAsociadas}" var="mFuncion" varStatus="loop1">
                        <p:tab id="t_funcion_#{loop1.index}" title="#{mFuncion.nombre}"  >
                            <f:subview id="tab_#{loop1.index}">
                                <p:panelGrid id="pg_funcion_#{loop1.index}">
                                    <ui:include src="#{mFuncion.paginaFuncion}"></ui:include>
                                </p:panelGrid>
                            </f:subview>
                        </p:tab>
                    </c:forEach>
                </p:tabView>
            </p:layoutUnit>
            <p:layoutUnit position="east" rendered="#{tareaController.tieneVisor eq true}" size="620">
                <p:panelGrid id="v_doc" style="width: 100%; top: 50px;">
                    <p:row>
                    </p:row>
                </p:panelGrid>
            </p:layoutUnit>
        </p:layout>

我现在想为什么会出现这种情况,也许是因为ui:include加载页面预渲染,我必须以某种方式更新<p:layout>状态后加载?如果就是这样,我不知道如何完成。 非常感谢。

编辑:我将最小宽度和最小高度更改为更高的值,因为它们不够接近我没有得到第三个奇怪的滚动条所以我虽然它可能是相关的东西溢出风格,但我改变它,没有任何反应。 最后,我放弃了这个,我只是缩小了布局的最小尺寸,它们没有重叠。

0 个答案:

没有答案