Primefaces菜單欄菜單寬度



Answers

用這個:

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

只改變你需要的像素:)和菜單的下拉寬度將改變。

Question

我遇到菜單項:(

想要包括一張照片,但沒有被允許所以問題是愚蠢的沒有它

我似乎無法改變下拉菜單的寬度,我已經在我的腦海中包含了一個樣式,在每個菜單項中都包含了一個寬度的attrib,但它們沒有任何區別:

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



頭部中的樣式元素很可能被放置在頁面標記之後的Primefaces樣式表覆蓋。 如果您通過Firebug查看頁面,則可能會注意到自定義樣式實際上被​​Primefaces樣式表所覆蓋。

在那個筆記,你的樣式表是正確的,因為使用Firebug我可以通過在DOM元素上強制該樣式來增加菜單寬度。

試著把這個樣式標籤放在體內,看看是否有所作為。




謝謝,謝謝,謝謝,終於在這裡回答了

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



Related



Tags

primefaces