Подменю блоков прокрутки списка подменю PrimeFaces

Question

Я разрабатываю простую веб-приложение CRUD. Таблицы, которые пользователи хотят редактировать, помещаются в меню, в котором пользователи могут выбирать их и редактировать. Как выясняется, не все пользователи имеют большие мониторы, как я это делаю здесь, я наткнулся на свою проблему. Когда окно монитора или браузера недостаточно велико для отображения всего меню, меню получает вертикальный скроллер и до тех пор, пока меню имеет скроллер, подменю не видны (скрыты ниже). Однако вы получаете горизонтальный скроллер, но это не очень практично.

Я знаю, что это проблема CSS, но я никогда не был экспертом в CSS. Я знаю основы для tweek моей веб-страницы здесь и там, но это выходит за рамки моего 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

Поскольку элементы меню находятся немного, появится полоса прокрутки.

Чтобы сохранить случай подменю подменю, мне пришлось переопределить стиль выполнения, который выполняется классом javascript PrimeFaces.widget.Menubar.

После того, как ваша форма включает этот скрипт.

<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 поддерживает значения.

Надеюсь, что это поможет.