PrimeFaces菜單欄滾動塊子菜單

Question

我正在開發一個簡單的CRUD Web應用程序。用戶想要編輯的表格被放置在一個菜單中，用戶可以選擇它們並進行編輯。事實證明，並非所有用戶都有像我這樣做的大顯示器，所以我偶然發現了我的問題。當監視器或瀏覽器窗口不足以顯示整個菜單時，菜單會獲得一個垂直滾動條，並且只要菜單具有滾動條，子菜單就不可見（隱藏在下方）。你確實得到了一個水平卷軸，但這不是很實用。

我知道這是一個CSS問題，但我從來沒有在CSS的專家。我知道我的網頁在這裏和那裏的基礎知識，但這超出了我的CSS知識。我搜索了網頁，發現人們對面板有類似的問題。我已經嘗試過他們的解決方案，但它對我的情況並不起作用。

你們所有的網站/ CSS專家在那裏，請幫助我。我知道在過去我花了大量的時間來解決類似的CSS問題，如果有人能夠更快地解決它，我會非常感激。

我已經試過張貼問題的照片，但我沒有足夠的聲譽分，所以我就張貼代碼來代替：

<h:form> 
    <p:menubar> 
     <p:submenu label="Menu 1" icon="ui-icon-document"> 
      <p:submenu label="Choice 1" > 
       <p:menuitem value="SubChoice 1" url="#" /> 
       <p:menuitem value="SubChoice 2" url="#" /> 
       <p:menuitem value="SubChoice 3" url="#" /> 
       <p:menuitem value="SubChoice 4" url="#" /> 
      </p:submenu> 
      <p:menuitem value="Choice 2" url="#" /> 
      <p:menuitem value="Choice 3" url="#" /> 
      <p:menuitem value="Choice 4" url="#" /> 
      <p:menuitem value="Choice 5" url="#" /> 
      <p:menuitem value="Choice 6" url="#" /> 
      <p:menuitem value="Choice 7" url="#" /> 
      <p:menuitem value="Choice 8" url="#" /> 
      <p:menuitem value="Choice 9" url="#" /> 
      <p:menuitem value="Choice 10" url="#" /> 
      <p:menuitem value="Choice 11" url="#" /> 
      <p:menuitem value="Choice 12" url="#" /> 
      <p:menuitem value="Choice 7" url="#" /> 
      <p:menuitem value="Choice 8" url="#" /> 
      <p:menuitem value="Choice 9" url="#" /> 
      <p:menuitem value="Choice 10" url="#" /> 
      <p:menuitem value="Choice 11" url="#" /> 
      <p:menuitem value="Choice 12" url="#" /> 
     </p:submenu> 
     <p:submenu label="Menu 2" icon="ui-icon-document" > 
      <p:menuitem value="Choice 1" url="#" /> 
     </p:submenu> 
    </p:menubar> 
</h:form> 

如果調整瀏覽器可以複製的問題到整個菜單無法顯示的高度，並且您看到垂直滾動。然後如果你進入子菜單，它將不再可見。

也許是最明智的事情將是該菜單項劃分成某種羣體，但客戶要像這樣，所以我沒有太多的選擇......

我使用Primefaces 4.0 ，JBoss 7.1.1，NetBeans 7.4，Chrome 32

讓我知道你是否需要更多的信息。謝謝。

Answer 1

由於Menubar項目有點多，滾動條會出現。

爲了保持子菜單的子菜單的情況下，我不得不重寫運行時的樣式，這是由PrimeFaces.widget.Menubar JavaScript類完成的。

表單包含此腳本後。

<script> 
    PrimeFaces.widget.Menubar.prototype.activate = function(b) { 
     this.highlight(b); 
     var a = b.children("ul.ui-menu-child"); 
     if (a.length == 1) { 
      b.parent().css('display', 'table') 
      this.showSubmenu(b, a)   
     } else{ 
      b.parent().css('display', 'block') 
     } 
    } 
</script> 

一個小的工作示例可以在github找到。 和online Demo。

注意：display : 'table'在IE7及更早版本中不受支持。 IE8需要！DOCTYPE。 IE9支持這些值。

希望這有助於。