如何使用CSS更改Primefaces Picklist高度？

我們想改變<ul ...>標籤的高度。 <ul...>標籤中沒有id。我們只能知道html表的id。以下html代碼由JSF Primefaces生成。如何使用CSS更改Primefaces Picklist高度？

<table id="roleEntryForm:resourceItem" class="ui-picklist ui-widget"> 
    <tbody> 
     <tr> 
      <td> 
       <ul class="ui-widget-content ui-picklist-list ui-picklist-target ui-corner-all ui-sortable"></ul> 
       <select id="roleEntryForm:resourceItem_target" class="ui-helper-hidden" multiple="true" name="roleEntryForm:resourceItem_target"></select> 
      </td> 
      .... 
     </tr> 
     ..... 
    </tbody> 
</table>

enter image description here

我用CSS如下，但它不工作。

#roleEntryForm:resourceItem tr td ul { 
    height:500px; 
} 

.ui-picklist .ui-picklist-list { 
    height: 200px; 
    list-style-type: none; 
    margin: 0; 
    overflow: auto; 
    padding: 0; 
    width: 200px; 
} 
.ui-corner-all { 
    border-radius: 3px 3px 3px 3px; 
} 
.ui-widget-content { 
    background: none repeat scroll 0 0 #FFFFFF; 
    border: 1px solid #A8A8A8; 
    color: #4F4F4F; 
} 
ul { 
} 

.ui-widget { 
    font-size: 98% !important; 
} 
.ui-widget { 
    font-family: Arial,sans-serif; 
    font-size: 1.1em; 
}

來源

2013-03-06 CycDemo

爲什麼不能用'class'來代替？ – 2013-03-06 05:08:43

@ icanc，我更新它 – CycDemo 2013-03-06 05:16:16

我改變了高度爲400px，它爲我工作。我改變了'.ui-picklist .ui-picklist-list'塊的高度。 – 2013-03-06 05:19:39

這對我的作品在Chrome，但無法在Internet Explorer

.ui-picklist .ui-picklist-list { height: 300px; margin: 0; overflow: auto; padding: 0; }

來源

2013-07-17 12:56:58

它會影響所有的領料單。在我的項目中有很多選項。 – CycDemo 2013-07-17 13:23:01

Belwo是代碼改變選擇列表primeface的高度和寬度。這適用於我

<h:head> 
<style> 
.ui-picklist .ui-picklist-list{ 
height:500px; 
width: 500px 
} 

</style> 
</h:head>

來源

2013-07-22 06:51:09

它會影響所有選項列表。在我的項目中有很多選項列表 – CycDemo 2013-07-23 10:05:02

然後你爲你想要更改的選項列表添加一個特定的樣式，請參閱http://forum.primefaces.org/viewtopic.php?f=3&t=9573（ styleClass =「p1」，styleClass =「p2」和styleClass =「p3」）。蘇里亞的答案是對的 – 2013-12-14 02:05:22

如何使用CSS更改Primefaces Picklist高度？

回答

相關問題