Question

我在使用menuitem时遇到了问题：（

想要包含图片，但不允许 所以没有它就是愚蠢的问题

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

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

当菜单项突出显示时，选择条的宽度正确！

任何线索???，这是一个示例菜单栏

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

Answer 1

如果您希望宽度跟随您的内容，请使用此

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

Answer 2

使用它：

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

只更改您需要的像素:)菜单的下拉宽度将会改变。

Answer 3

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

临时解决方案。

Answer 4

这应该有所帮助：

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

Answer 5

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

在这方面，你的样式表是正确的，因为使用Firebug我可以通过在DOM元素上强制使用这种样式来增加菜单宽度。

尝试将此样式标记放在正文中，看看是否会产生影响。

Answer 6

谢谢，谢谢，谢谢，最后答案这是

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

Answer 7

其他替代

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

Answer 8

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

(jsf):

<p:menubar styleClass="yourClass">

通过提供额外的 css 类，您可以轻松地在默认行为和自定义设置之间切换。

CSS：

.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);
}

也许您必须根据图标大小调整计算中使用的像素，但使用的值适合我的主题。

Primefaces菜单栏menuitem宽度

8 个答案: