Primefaces menubar menuitem Ширина

У меня проблемы с пунктом меню :(

Хотел включить картинку, но не позволил Так что вопрос без этого глуп

Кажется, я не могу изменить ширину выпадающего меню, я включил стиль в мою голову и атрибут ширины в каждом пункте меню, но они не имеют никакого значения:

<style>
ui-menu .ui-menu-parent .ui-menu-child
{
    width: 400px; /* exagerated !! */
}
</style>

Когда пункт меню выделен, полоса выбора имеет правильную ширину!

Любые подсказки ???, вот пример menubar

<p:menubar>
    <p:submenu label="Menu 1"
        style="text-align: left;">

        <p:menuitem ajax="false" 
                    action="/Page1"
                    value="Page 1" 
                    style="width: 350px;"/>

        <p:menuitem ajax="false" 
                    action="/too_long_page"
                    value="Some really long menu text that is far too long"
                    style="width: 350px;" />

        <p:menuitem ajax="false" 
                    action="/too_long_page"
                    value="Some really long menu text that is far too long"
                    style="width: 350px;" />

    </p:submenu>
    <p:menuitem ajax="false" 
                action="/Page2"
                value="Page 2" />
</p:menubar>

Ответы на вопрос(7)

Другая альтернатива

ul.ui-menu-child {
    width: auto !important;
    min-width: 200px;
}

Это должно помочь:

.ui-menu {
    min-width: 350px;
}
 javaxian12 июн. 2012 г., 10:19
Меня устраивает. Попробуйте удалить все другие ссылки на ui-menu-что угодно из ваших исходников CSS. Я также изменил определение на min-width, поскольку width также меняет ширину p: menubar.
 user78429811 июн. 2012 г., 04:43
Спасибо, однако, попробовал все варианты этого, я думаю, что это еще ниже, я даже пытался важно !, если бы я мог загрузить снимок экрана, вы бы увидели, в чем проблема, или попытались бы воссоздать его, используя очень длинный текст или из ваших пунктов меню.
 user78429813 июн. 2012 г., 00:20
Спасибо, попробую, когда у меня будет шанс, к сожалению, у меня есть ужасная вещь под названием "работа": -}

чтобы ширина следовала вашему контенту, используйте эту

ul.ui-menu-child {
    white-space: nowrap;
    width: auto !important;
}
 schlebe12 июл. 2018 г., 15:55
На Primefaces 6.2 эта работа корректна для всех моих меню. За исключением <p: подменю>, которое содержит элементы со значками, которые отображаются в 2 строки. Для всех этих подменю я установил ширину явно. Я голосую :-)
 ChristopherS05 мая 2014 г., 11:41
Вероятно, лучший CSS для этого случая

использовать это:

<style>    
       ul.ui-menu-child
        {
            white-space: nowrap;
            width: 290px !important;
        }
</style>

Измените только те пиксели, которые вам нужны :), и ширина выпадающего меню изменится.

 <style>
     ul.ui-menu-child{
     width: 250px !important;
        }
 </style>

Спасибо, спасибо, спасибо, наконец, ответ здесь

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:c="http://java.sun.com/jsp/jstl/core">
    <h:head>
        <title>Prime Faces Examples - ??</title>
        <style>
            ul.ui-menu-child
            {
                width: 460px !important;
            }
        </style>
    </h:head>
    <h:body>
        <h:form>  
            <p:menubar>
                <p:submenu label="Menu 1"
                           style="text-align: left;">

                    <p:menuitem ajax="false" 
                                action="/Page1"
                                value="Page 1" 
                                style="width: 450px;"/>

                    <p:menuitem ajax="false" 
                                action="/too_long_page"
                                value="Some really long menu text that is far too long"
                                style="width: 450px;" />

                    <p:menuitem ajax="false" 
                                action="/too_long_page"
                                value="Some really long menu text that is far too long"
                                style="width: 450px;" />

                </p:submenu>
                <p:menuitem ajax="false" 
                            action="/Page2"
                            value="Page 2" />
            </p:menubar>
        </h:form>  
    </h:body>
</html>

вероятно, переопределяется таблицами стилей Primefaces, которые размещаются после него в разметке страницы. Если вы просматриваете страницу через Firebug, вы, вероятно, заметите, что пользовательский стиль на самом деле переопределяется таблицами стилей Primefaces.

На этом примечании ваша таблица стилей верна, потому что с помощью Firebug я смог увеличить ширину меню, применив этот стиль к элементу DOM.

Попробуйте вместо этого поместить этот тег стиля в тело и посмотрите, имеет ли это значение.

 user78429811 июн. 2012 г., 04:45
ммм интересное имя пользователя, все равно попробую, спасибо, смотри комментарии выше

Ваш ответ на вопрос