Primefaces菜單欄菜單項寬度

希望包括事先知情同意，但wasnt允許 所以問題是愚蠢的，沒有它

我似乎無法改變，以下拉菜單的寬度，我已經包含在我的腦海風格和每個菜單項的寬度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>

來源

2012-03-27 user784298

頭部內的風格元件很可能被由被後它放置在頁面標記的Primefaces樣式表中重寫。如果通過Firebug查看頁面，您可能會注意到自定義樣式實際上已被Primefaces樣式表覆蓋。

在該說明中，您的樣式表是正確的，因爲使用Firebug我可以通過在DOM元素上強制該樣式來增加菜單寬度。

試着將這個樣式標籤放在身體內，看看是否有所作爲。

來源

2012-03-27 11:18:54

嗯有趣的用戶名，反正會努力，感謝，見上面 – user784298 2012-06-11 02:45:14

這應有助於：

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

來源

2012-06-10 22:20:19 javaxian

感謝的意見，但是，嘗試所有這一切的變化，我認爲這進一步的下跌，我甚至試過重要！如果我可以上傳一個屏幕快照，你會看到問題是什麼，或嘗試重新使用非常長的文本作爲一個或多個菜單項。 – user784298 2012-06-11 02:43:42

它適合我。嘗試刪除所有其他對ui-menu的引用 - 無論你的css源碼如何。我也已將定義更改爲最小寬度，因爲寬度也會更改p：菜單欄的寬度。 – javaxian 2012-06-12 08:19:04

謝謝，會給我一個機會，當我有機會，不幸的是我有這樣一個可怕的事情叫做「工作」要做： - } – user784298 2012-06-12 22:20:01

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

臨時解決方案。

來源

2012-09-11 17:01:01 Mehmet

謝謝你，謝謝你，謝謝你，最後一個答案這裏是

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

來源

2012-09-12 02:00:53 user784298

，如果你想寬度按照你的內容，使用此

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

來源

2013-01-31 05:43:33 Aaron

可能是這種情況下最好的CSS – ChristopherS 2014-05-05 09:41:26

使用本：

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

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

來源

2013-03-25 15:38:21 DANYDHSV

其他替代

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

來源

2015-10-24 08:57:00 myset

Primefaces菜單欄菜單項寬度

回答

相關問題