primefaces教學 - Primefaces菜單欄菜單寬度





showcase sample (7)


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

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

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

我遇到菜單項:(

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

我似乎無法改變下拉菜單的寬度,我已經在我的腦海中包含了一個樣式,在每個菜單項中都包含了一個寬度的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>



如果你想寬度跟隨你的內容,使用這個

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



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

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



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

臨時解決方案




這應該有所幫助:

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



其他的選擇

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



您可以使用以下代碼:

public UIComponent findComponent(final String id) {

    FacesContext context = FacesContext.getCurrentInstance(); 
    UIViewRoot root = context.getViewRoot();
    final UIComponent[] found = new UIComponent[1];

    root.visitTree(new FullVisitContext(context), new VisitCallback() {     
        @Override
        public VisitResult visit(VisitContext context, UIComponent component) {
            if(component.getId().equals(id)){
                found[0] = component;
                return VisitResult.COMPLETE;
            }
            return VisitResult.ACCEPT;              
        }
    });

    return found[0];

}

此代碼將僅找到樹中具有您傳遞的id的第一個組件。 如果樹中有2個具有相同名稱的組件,則必須執行自定義操作(如果它們位於2個不同的命名容器下,則可以這樣做)。





primefaces