如何頂級豐富：panelMenu豐富：outputPanel與h：panelGrid？

我會非常感謝一些關於如何處理上述問題的專家意見。大體上它是這樣分解的：我已經實現了一個動態創建的rich:panelMenu，並且根據RichFaces演示，將a4j:outputPanel放在正確的位置以便包含當用戶單擊菜單中的項目時出現的內容。代碼是：如何頂級豐富：panelMenu豐富：outputPanel與h：panelGrid？

  <h:form> 
       <a4j:region id="logs"> 
        <h:panelGrid columns="2" border="0" style="width: 100%; margin: auto;"> 
         <rich:panel header="Menu"> 
          <rich:panelMenu mode="ajax" style="width: 300px"> 

           <!-- feed iteration --> 
           <c:forEach items="#{MyBacking.panelNodes}" var="map"> 
            <rich:panelMenuGroup label="#{map.key}" 
             style="padding-left: 10px;"> 
             <c:forEach items="${map.value}" var="entry"> 
              <rich:panelMenuItem label="#{entry}" 
               style="padding-left: 20px;" 
               action="#{MyBacking.updateCurrent}"> 
               <f:param name="current" value="#{entry}" /> 
              </rich:panelMenuItem> 
             </c:forEach> 
            </rich:panelMenuGroup> 
           </c:forEach> 
          </rich:panelMenu> 
         </rich:panel> 
         <rich:panel header="Content"> 
          <a4j:outputPanel ajaxRendered="true" layout="inline" 
           style="vertical-align: top"> 
           <h:outputText value="#{MyBacking.current}" id="current" /> 
          </a4j:outputPanel> 
         </rich:panel> 
        </h:panelGrid> 
       </a4j:region> 
      </h:form>

[注意a4j:outputPanel有CSS嘗試和垂直對齊到頂部，但含rich:panel一直是我的重點主要表現]

的問題是：

1：我就像兩個組件要水平對齊，所以兩者的頂部都是水平的。我使用h:panelGrid來嘗試和控制菜單和outputPanel，但即使它呈現表格，vertical-align似乎也不起作用。
我認爲它可能最終被應用於錯誤的地方，因此不起作用（例如包含跨度 - 雖然理論上在另一個元素內部的元素應該打開以由該屬性控制）。

<h:panelGrid columns="2" border="0" style="width: 100%; margin: auto;">

也沒有工作。我至少在正確的軌道上？由於右側面板將包含文件的內容，因此它將比面板菜單長很多。我需要防止panelMenu沿着outputPanel的左側滑動（現在正在發生的垂直對齊的中間）。

2：我想用px修正panelMenu的寬度，但是如果菜單最終包含一個太長的條目，我注意到這個溢出看起來被固定在隱藏處。我似乎無法獲得overflow: auto的工作。我只需要一個水平。在這種情況下滾動條。

3：panelGrid的必須是100％它包含在我聽過的h:panelGridwidth:100%造成的問題，所以如果這仍然是我怎樣才能得到它周圍的情況下選項卡的寬度。？

我希望這是有道理的。我已經使用了一段時間的css，但是迫使我想要射入RF組件比我想象的更加棘手。

非常感謝

來源

2010-03-09 volvox

點1：使用<h:panelGrid columns="2" border="0" style="width: 100%" columnClasses="cols, cols"> ，然後指定你的CSS中的cols類。多次指定它將應用於連續的列。它在documentation中，但未在其示例中引用。

來源

2010-03-09 12:11:52 volvox

如何頂級豐富：panelMenu豐富：outputPanel與h：panelGrid？

回答

相關問題