change the width of the

Question

I have a slectOnMenu component I am trying to Change the width of slectOnMenu by setting the width:120% !important; in the style after overridering .ui-selectonemenu, ui-selectonemenu- but I am getting just the Label changed how can I move the trigger too? I want to change the selectOneMenu width like the white area below.

CSS

              <h:form id="rqScannerForm">
                 <style type="text/css">
                    .ui-selectonemenu{width: 120% !important;} 
                    .ui-selectonemenu-label{width: 120% !important;}
                 </style>
                  <p:selectOneMenu  style="width: 120% !important;}" scrollHeight="150" 
                  value="#{viewEventStatusController.eventStatusId}"  disabled="#{!eventStatusController.isEntityEditable}" autoWidth="false" >
                  <f:selectItems value="#{viewEventStatusController.eventStatusList}" var="eventStatus" itemValue="#{eventStatus.id}" itemLabel="#{eventStatus.objectId}" />
                  </p:selectOneMenu>
              </h:form>

screenshot

Possible duplicate of [How do I override default PrimeFaces CSS with custom styles?](https://stackoverflow.com/questions/8768317/how-do-i-override-default-primefaces-css-with-custom-styles) — Kukeltje, Nov 29 '17 at 13:41

score 1 · Accepted Answer · answered Nov 29 '17 at 12:33

1

.ui-selectonemenu {
    min-width: 50% !important;
}

Just be aware that making a width bigger then 100% can mess up your layout. I have never ever used one bigger then 100%!. If you meant pixels use

.ui-selectonemenu {
    min-width: 120px !important;
}

To be more responsive-save use em instead of px:

.ui-selectonemenu {
    min-width: 8em !important;
}

answered Nov 29 '17 at 12:33

onderbewustzijn

935
7
32

Not the best suggestion (not a very good one in fact). Don't use !important, only use it as a very last resort. Learn about css specificity! – Kukeltje Nov 29 '17 at 13:28
@Kukeltje Then please provide a better one ;-) I'm very aware of specificity ;-) – onderbewustzijn Nov 29 '17 at 13:40
See the duplicate – Kukeltje Nov 29 '17 at 13:41
@Kukeltje what about Primefaces generated width in inline style attribute after css are loaded? Primefaces itself uses also !important 12 times in the component.css sheet. So never say never ;-) If you still believe in this case you can avoid !important I am very eager to see a better suggestion – onderbewustzijn Nov 29 '17 at 14:02
From the duplicate: The !important should _only_ be used in order to override the values hardcoded in HTML element's style attribute from a CSS stylesheet file on (which is in turn also a bad practice, but in some rare cases unfortunately unavoidable). – Kukeltje Nov 29 '17 at 14:03
@Kukeltje first you say it's not the best suggestion, then you confirm it's the only solution to be used in this case... I don't see where your comments are going. :-) Also not a duplicate because it states 'hardcoded' and not 'Primefaces-javascript-generated' which is still a very important difference. The hardcoded values are upfront known by the user, while the generated only after rendering... For primefaces beginners this should be made undisputedly clear. I hope you understand my point of view :-) – onderbewustzijn Nov 29 '17 at 14:25
Nice it works it is possiable to change the heigth too? – benz Nov 29 '17 at 14:29
@tree Google is your friend ;-) height is an easy one ;-) – onderbewustzijn Nov 29 '17 at 14:35
I have already googled it and I appreciate any help since i have tried to override `.menu .ui-selectonemenu-label { height: 30px !important; } ` after adding `height: 30px;` to the `selectOneMenu` but it did not work well. – benz Nov 29 '17 at 14:49
@tree create a new question and tag me in the comment ;-) – onderbewustzijn Nov 29 '17 at 15:02
Ok I found it :) – benz Nov 29 '17 at 15:03
I'm not saying it is the only solution. That is quote from the duplicate that states when to use it. And both hardcoded values and values set via javascript end up in the styles attribute. Both have the same 'weight', so no real difference and hence the duplicate is a duplicate even if !important is needed. Primefaces users should know the duplicate at first. Cheers! – Kukeltje Nov 29 '17 at 15:13

change the width of the

1 Answers1