Question

我的页面中有accordionPanel和日程安排。但是当我扩展accordionPanel时，我的日程安排就会向下移动。为什么？我使用primefaces。

我添加了一个屏幕：http://zapodaj.net/2a318f4131f84.jpg.html

我在CSS中对区域进行着色以显示区域彼此不重叠。

月份名称以及周数和月份之间的切换不会移动。只有日历向下移动。为什么呢？

<div id="panelMenu">
    <h:form>
        <p:accordionPanel activeIndex="false">
            <p:tab title="#{msg.manage}">
                <p:menu styleClass="selection">
                    <p:menuitem action="#{userMB.patientList()}" value="Pacjenci" icon="ui-icon-triangle-1-e"/>
                    <p:menuitem action="#{userMB.doctorList()}" value="Lekarze" icon="ui-icon-triangle-1-e"/>
                    <p:menuitem action="#{userMB.inactiveAccountList()}" value="Nieaktywne" icon="ui-icon-triangle-1-e"/>
                </p:menu>
            </p:tab>
            <p:tab title="#{msg.myAccount}">
                <p:menu styleClass="selection">
                    <p:menuitem value="#{msg.edit}" action="#{userMB.editMyAccount()}" icon="ui-icon-pencil"/>
                    <p:menuitem value="#{msg.logout}" action="#{loginMB.logout()}" icon="ui-icon-power"/>
                </p:menu>
            </p:tab>
        </p:accordionPanel>
    </h:form>
</div>

    <div id="visitsRegisterSecretary">
        <h:form id="form">
            <p:growl id="messages"/>  
            <p:schedule id="schedule" value="#{visitSecretaryMB.eventModel}" widgetVar="myschedule" locale="pl" timeZone="GMT+2" >  
                <p:ajax event="dateSelect" listener="#{visitSecretaryMB.onDateSelect}" update="eventDetails" oncomplete="eventDialog.show()" />  
                <p:ajax event="eventSelect" listener="#{visitSecretaryMB.onEventSelect}" update="eventDetails" oncomplete="eventDialog.show()" />  
                <p:ajax event="eventMove" listener="#{visitSecretaryMB.onEventMove}" update="messages" />  
                <p:ajax event="eventResize" listener="#{visitSecretaryMB.onEventResize}" update="messages" />  
            </p:schedule>

CSS：panelMenu to accordionPanel

#panelMenu {
    float: right;
    height: auto;
    width: 180px;
}

访问时间表

#visits {
    padding-top: 200px;
    width: 700px;
    padding-bottom: 60px;
}

两者都在：

 #all {
    width: 901px;
    height: auto;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
}

Answer 1

浮动元素仍然是网页正常流程的一部分。因此，当你扩展 panelMenu并且高度与<p:schedule>的父框重叠，它会影响<p:schedule>的位置，并会导致它移动。即使你没有看到它，也会发生重叠。因此，您可以做的一件事就是使用panelMenu定位（在absolute定位框内）将relative从页面的正常流量中移除。

注意：提供的xhtml上没有id值visits。因此，我将假设给出的规则实际上是div id="visitsRegisterSecretary"，我在CSS中将#visits更改为#visitsRegisterSecretary。

您所要做的就是将accordionPanel包裹在下面的两个div中

<div id="panelMenuContainer">
    <div id="panelMenu">
        <h:form>
             <p:accordionPanel activeIndex="false">
                 <p:tab title="#{msg.manage}">
             <!--Remainder ommitted -->
             </p:accordionPanel>
        </h:form>
    </div>
</div>

然后在样式表中定义以下规则

#panelMenuContainer {
    position:relative; 
}

#panelMenu {
    position: absolute; 
    left: 880px;
    width: 180px;
}

left属性会导致panelMenu相应移动。

附加说明：

我只是在left中猜测#panelMenu的值，所以改为需要。
此外，您可以删除padding-top规则 #visitsRegisterSecretary如果您希望两个<h:forms>对齐正确的（假设你正在追求的是什么）。

您可以参考这些链接以获得更深入的解释

All about floats

Absolute positioning inside relative positioning

AccordionPanel移动Schedule

1 个答案: