I would like to know, how to change the background-color of a p:selectOneMenu.
I have tried this
<p:selectOneMenu value="Select One" style="background-color:red" >
<f:selectItem itemLabel="Select One" itemValue="" />
.....
But the background is still white.
Try panelStyle attribute as given below:
<p:selectOneMenu value="Select One" panelStyle="background-color:red" >
<f:selectItem itemLabel="Select One" itemValue="" />
The visual appearance is determinated by a surrounding <div> and a <label>. The easiest way is to give 'red' background to "everything" inside your p:selectOneMenu:
<p:selectOneMenu value="Select One" styleClass="redSelect">
while in your <h:head>:
.redSelect > * {
background: red;
}
In addition to change the background of the drop-down menu, overwrite the background property of the following CSS class combination:
.ui-selectonemenu-items.ui-selectonemenu-list {
background: red !important;
}
Here is the right answer:
.ui-selectonemenu input.ui-selectonemenu-label{ background: red; }
Related
I'm trying to get rid of this little inside shadow in a SelectOneMenu
<h:outputLabel styleClass='defaultOutputLabel' for="sexe" value="Sexe: *" />
<p:selectOneMenu id="sexe" styleClass='selectMenu' required="true" requiredMessage="Vous devez sélectionner un sexe.">
<f:selectItem itemLabel='Homme' itemValue='Homme' />
<f:selectItem itemLabel='Femme' itemValue='Femme' />
</p:selectOneMenu>
I tried:
box-shadow: none !important;
border-style: none !important;
I can't see what other selector it could be. Any ideas ?
UPDATE :
Thanks to tt_dev for the solution:
box-shadow property on the .ui-inputfield part.
it's the box-shadow attribute applied to ui-inputfield css class.
you can use the following css code as you mentioned:
.ui-inputfield { box-shadow: none !important; }
Using rowStyleClass won't work for me because I do not want to re-render the whole datatable. I have panelGroup's inside of my datatabe. I re-render the ones I need and it works just fine. But, I cannot figure out how I can change the background color of the cell row/cells that I have re-rendered. I can do things to the selectOneMenu or outputText styles but not the td/tr.
<p:column styleClass="column5">
<h:panelGroup id="panelGroupAN">
<h:selectOneMenu id="accountNumber" value="#{var.accountNumber}" rendered="#{var.checkedBox}">
<f:selectItem itemValue="-1" itemLabel="Select One" />
<f:selectItems value="#{bean.accountNumberList}" var="option" itemLabel="#{option.code}" itemValue="#{option.code}" />
</h:selectOneMenu>
<h:outputText value="#{var.accountNumberDisabled}" rendered="#{!(var.checkedBox)}" />
</h:panelGroup>
</p:column>
EDIT (still not working)
.yellowBG {
background-color: #FBEC88 !important;
background-image: none !important;
color: #000000 !important;
}
and
<h:panelGroup id="panelGroupS" styleClass="#{var.checkedBox ? 'yellowBG' : 'column5'}">
http://i.stack.imgur.com/V4cAb.png
you can see a little bit of the yellow but i want it on the whole cell
EDIT 2:
figured it out with jquery.
<p:ajax oncomplete="changeColor(#{rowIndex}, #{var.checkedBox})" />
and
function changeColor(rowIndex, disabledCheck){
if(disabledCheck){
$('.ui-datatable-data tr').eq(rowIndex).children('td,th').css( "background-color", "#FDFEFE" );
}
else{
$('.ui-datatable-data tr').eq(rowIndex).children('td,th').css( "background-color", "#FBEC88" );
}
}
if anyone ever needs it!
I need to change the width in p:selectonemenu and i'd like to do it in css.
I tried the following, but doesn't work:
<p:selectOneMenu id="aderenteMenu" required="true"
requiredMessage="Aderente obbligatorio" styleClass="aderentestyle"
value="#{garaManagedBean.selectedGara.aderente.id}">
<f:selectItems value="#{garaManagedBean.listaAderenti}" />
</p:selectOneMenu>
In css file i have:
.aderentestyle .ui-selectonemenu {
width: 300px !important;
}
I don't need to set all p:selectonemenu.
Thanks
I solved in this way. The css file doesn't need to specify .ui-selectonemenu.
.aderentestyle {
width: 300px !important;
}
I am trying to implement following look: http://www.primefaces.org/showcase/ui/selectManyCheckbox.jsf
Notice there is no css-borders around the component at the PrimeFaces showcase site.
<h:outputText value="Horizontal: " />
<p:selectManyCheckbox value="#{formBean.selectedOptions}">
<f:selectItem itemLabel="Option 1" itemValue="Option 1" />
<f:selectItem itemLabel="Option 2" itemValue="Option 2" />
<f:selectItem itemLabel="Option 3" itemValue="Option 3" />
</p:selectManyCheckbox>
However, I got unwanted borders around the component in my implementation. I have tried to add style="border-style: none;" i.e.
<p:selectManyCheckbox value="#{formBean.selectedOptions}" style="border-style: none;">
without any result. I have a default.css file according to:
.ui-widget, .ui-widget .ui-widget {
font-size: 80% !important;
}
I do not think that the css resource will have any affect on this issue, but I might be wrong.
I can't see any difference in look between differnet browsers.
Can you please tell me why I got borders and how I can get rid of them, only at this specific component?
Best regards
Borders? Primefaces' p:selectManyCheckbox has no borders by default.
Anyhow, if you want to override any style rule you can use !important.
This should remove any border:
<p:selectManyCheckbox value="#{formBean.selectedOptions}" style="border-style: none !important;">
I disagree with havning no borders. I tried removing all my css but I still got borders. Might be theme specific.
I had to use the following:
.noBorder tr,.noBorder td {
border: none !important;
}
<p:selectManyCheckbox value="#{formBean.selectedOptions}" styleClass="noBorder">
<f:selectItem itemLabel="Option 1" itemValue="Option 1" />
</p:selectManyCheckbox>
How can i control the location of the dropdown button of rich:combobox?
By default it's located on the right of the text element. I want it to be located on the left side of the text element.
You can refer to the official documentation to see which style class names are available for customizing the <rich:combobox> http://docs.jboss.org/richfaces/latest_3_3_X/en/devguide/html/rich_comboBox.html.
I try with this setting and the drop down button is located on the left hand side now:
<rich:comboBox>
<f:selectItem itemValue="suggestion 1"/>
<f:selectItem itemValue="suggestion 2"/>
<f:selectItem itemValue="suggestion 3"/>
<f:selectItem itemValue="suggestion 4"/>
<f:selectItem itemValue="suggestion 5"/>
</rich:comboBox>
and declare this style in the page:
<style type="text/css">
input.rich-combobox-button, input.rich-combobox-button-inactive, input.rich-combobox-button-disabled{
left:0px;
}
.rich-combobox-input, .rich-combobox-input-disabled, .rich-combobox-input-inactive{
font-weight:bold;
text-align:center;
}
</style>