0

私accordionPanelのページにはスケジュールがあります。しかし、 を拡張するaccordionPanelと、スケジュールが下がります。なんで？プライムフェイスを使用しています。

画面を追加しました: 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 から 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;
}
4

1 に答える 1

1

フローティング要素は、Web ページの通常のフローの一部のままです。そのため、展開 しての親ボックスpanelMenuと高さが重なるとの位置に影響し、移動の原因となります。あなたがそれを見ていなくても、オーバーラップは起こります。したがって、これを防ぐためにできることの 1 つは、(配置されたボックス内で) 配置を使用して、ページの通常の流れから外すことです。<p:schedule><p:schedule>panelMenuabsoluterelative

注:提供された xhtmlidの値にはありません。したがって、指定されたルールは実際には for であり、CSS で変更しvisitsたと仮定します。div id="visitsRegisterSecretary"#visits#visitsRegisterSecretary

あなたがしなければならないのはaccordionPanel、以下の 2 つの 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に応じて移動します。

追記事項：

  1. leftinの値を推測しているだけ#panelMenuなので、必要に応じて変更してください。
  2. また、両方を正しく整列させたい場合は、padding-topルールを 削除できます(それが目的であると仮定します)。#visitsRegisterSecretary<h:forms>

より詳細な説明については、これらのリンクを参照してください。

フロートについて

相対位置決め内の絶対位置決め

于 2013-07-15T16:43:43.753 に答える