Primefaces菜单栏菜单项宽度_Primefaces

Primefaces菜单栏菜单项宽度

primefaces

Primefaces菜单栏菜单项宽度,primefaces,Primefaces,我的菜单有问题 :( 想包括一张照片，但未被允许所以没有它的问题是愚蠢的我似乎无法更改下拉菜单的宽度，我在头脑中加入了一种风格，在头脑中加入了一种宽度属性每一个菜单项，但它们没有区别： <style> ui-menu .ui-menu-parent .ui-menu-child { width: 400px; /* exagerated !! */ } </style> ui菜单。ui菜单父菜单。ui菜单子菜单 { 宽度：400px；/*放大*/ }

我的菜单有问题 :(

想包括一张照片，但未被允许 所以没有它的问题是愚蠢的

我似乎无法更改下拉菜单的宽度，我在头脑中加入了一种风格，在头脑中加入了一种宽度属性每一个菜单项，但它们没有区别：

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


ui菜单。ui菜单父菜单。ui菜单子菜单
{
宽度：400px；/*放大*/
}

当菜单项高亮显示时，选择栏的宽度正确

有什么线索吗？？？，下面是一个示例菜单栏

<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>

标题中的样式元素很可能被页面标记中放置在其后的Primefaces样式表覆盖。如果通过Firebug查看页面，您可能会注意到自定义样式实际上被Primefaces样式表覆盖

注意，您的样式表是正确的，因为使用Firebug我能够通过在DOM元素上强制使用此样式来增加菜单宽度

尝试将此样式标记放在正文中，看看是否会有所不同。

这将有助于：

.ui-menu {
    min-width: 350px;
}


ul.ui-menu-child{
宽度：250px！重要；
}

临时解决方案。

谢谢，谢谢，谢谢，终于有答案了给你

<?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>


素数面示例-？？
ul.ui-menu-child
{
宽度：460px！重要；
}

如果希望宽度跟随内容，请使用此选项

ul.ui-menu-child {
    white-space: nowrap;
    width: auto !important;
}

使用以下命令：

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


ul.ui-menu-child
{
空白：nowrap；
宽度：290px！重要；
}

仅更改所需的像素：），菜单的下拉宽度将更改。

其他选项

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

要根据最大内容获得子菜单宽度，即使图标已就位，也可以使用以下方法

（jsf）：

也许你必须根据你的图标大小来调整计算中使用的像素，但是使用的值对于我的主题来说效果很好

谢谢，不过，我尝试了所有这方面的变化，我认为这是进一步向下，我甚至尝试了重要的！，如果我可以上传一个屏幕截图，你会发现问题所在，或者尝试在你的菜单项上使用很长的文本重新创建它。这对我很有用。尝试从css源中删除对ui菜单的所有其他引用。我还将定义更改为min width，因为width也更改了p:menubar的宽度。谢谢，我会尝试一下，当我有机会时，不幸的是我有一件可怕的事情叫做“工作”：嗯，有趣的用户名，无论如何，我会尝试，谢谢，请参阅上面Primefaces 6.2上的评论，这项工作对我所有的菜单都是正确的。除了包含在两行上显示图标的项目之外。对于所有这些子菜单，我明确地固定了宽度。我赞成：-）

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

<p:menubar styleClass="yourClass">

.ui-menu.ui-menubar.yourClass .ui-menuitem-text {
    white-space: nowrap;
}
.ui-menu.ui-menubar.yourClass .ui-menu-child {
    width: auto;
    padding-right: 34px;
}
.ui-menu.ui-menubar.yourClass .ui-menu-child .ui-menuitem {
    width: calc(100% + 30px);
}