0

When I using pickList of primefaces I had a problem:

This is my pickList:

<p:pickList id="pkList" value="#{func_route.cities}" var="city" itemLabel="#{city}" itemValue="#{city}" filterMatchMode="contains"  showSourceControls="true" showTargetControls="true" showSourceFilter="true" showTargetFilter="true" />

This is my CSS for my pickList:

.ui-picklist .ui-picklist-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: auto;
    height: 130px;
    width: 100px !important;
}

But CSS of primefaces:

.ui-picklist .ui-picklist-list {
    width: 350px !important;
}

So attribute width of my CSS are not accept in this my code. How can I fix it ?

BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
Thangnv
  • 805
  • 3
  • 11
  • 22
  • 1
    possible duplicate of [How do I override those classes defined in primefaces.css?](http://stackoverflow.com/questions/8768317/how-do-i-override-those-classes-defined-in-primefaces-css) – BalusC Oct 11 '13 at 13:05
  • Sorry but it not works for me, because in there Attribute width of primefaces was fixed !important, so I can't override it, other attributes I still override normarly! – Thangnv Oct 11 '13 at 14:04
  • Apparently your CSS is not loaded after PrimeFaces one. Either fix the loading order or add a custom class. – BalusC Oct 11 '13 at 14:05
  • yes, so how can I change order of loading ? – Thangnv Oct 11 '13 at 14:07
  • I tried as solution link you suggested but it not working :( – Thangnv Oct 11 '13 at 14:20

1 Answers1

1

Just override its css in your own css file:

.ui-picklist .ui-picklist-list {
    width: 100px;
}
Aritz
  • 30,971
  • 16
  • 136
  • 217