CODEWITHSUNDEEP
primefaces
Pravin
Pravin

Reputation: 103

Primefaces CSS Not Working p:selectOneMenu & p:calender

Primefaces CSS is not working in p:selectOneMenu and p:calendor component. When I am giving style="width:190px;" it's taking, but when I am using style Class it is not taking.

see the below...

Upvotes: 0

Views: 713

Answers (3)

Omar
Omar

Reputation: 38

You can use the size option to determine the width of the input element. like this : 

<p:calendar id="dateNaissance" value="#{utilisateurController.selected.dateNaissance}" 
showOn="button" size="32" />

Upvotes: 0

Shruti
Shruti

Reputation: 186

for p:Calendaroverride following css: 

.ui-inputfield, .ui-widget-content .ui-inputfield, .ui-widget-header .ui-inputfield {
    background: none repeat scroll 0 0 #FFFFFF;
    box-shadow: 0 2px 2px #D3D3D3 inset;
    color: #555555;
    width: 190px!important;
}

for p:selectOneMenu add following css:

.dropdownWidth{
        width:190px !important;
    }

and add styleClass="dropdownWidth" for your p:selectOneMenu component

Upvotes: 4

Marc
Marc

Reputation: 992

Use your browsers developer tools (in Chrome, hit F12 or right click the element and select "Inspect element") to see if there are any other CSS classes that are setting the width, you may have a pre-existing class that is setting the width that would be superseded by in-line styles but not by a class with a less specific identifier.

Upvotes: 0

Related Questions