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; }
Related
i have this menubar in my project, i'm using PrimeFaces for the first time:
<p:menubar styleClass="sso_header ui-widget-header " style="width:99.5%; margin-top: 3px; border-radius: 10px;" >
<p:menuitem value="Test" rendered="true"
style="border: 1px solid; margin-right: 5px;" icon="ui-icon-triangle-1-s" />
<p:menuitem value="LOG IN" rendered="true"
style="border: 1px solid; margin-right: 5px;" icon="ui-icon-triangle-1-s" />
</p:menubar>
I need last menuitem float:right;, at least I tried to include external style in this way:
<h:outputStylesheet name="css/style.css" />
and assign my css class to the menutitem.
I tried inline style whit the !important attribute, nothing works.
After inspect code from browser i noticed that Primefaces assign my style to a <a> inside a <li>.
There is a way to assign float right to that <li> in PrimeFaces?
Thanks in advance.
Check the html code that PrimeFaces is generating and use the css classes to define your styles, for your posted code something like this should work
.sso_header .ui-menuitem.ui-widget.ui-corner-all:last-child {
float: right;
}
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 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; }
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>