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>
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;
}
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; }
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 have a hidden property which is fetched from ebean. how do i pass that color code property to css function?
<h:panelGrid id="testpanel"
columns="#{message.no_of_columns}" rows="#{message.no_of_rows}"
styleClass="dynamicGrid">
<c:forEach items="#{bLDashBoardAction.listBondLoc}" var="item">
<h:panelGroup> <h:outputText value="#{item.rackTagCode}" />
<h:hiddenInput value="#{item.colorEBean.colorCode};" />
</h:panelGroup>
</c:forEach>
</h:panelGrid>
this is my css property,background need to be assigned from panelgrid colorcode
.dynamicGrid td
{
width: 50px;
height: 50px;
border: 4px solid gray;
background:
}
As you're restricted by strange design, your best bet is really to apply the style directly on the cell's content instead.
<h:outputText value="#{item.rackTagCode}" style="display:block;color:#{item.colorEBean.colorCode};" />
The display:block will make it to span the entire cell.
Don't think you can pass from JSF to css , you can create several classes with predefined background color , like .dynamicGridRed and .dynamicGridYellow
and call them conditionally styleClass="#{item.colorEBean.colorCode}"
wher colorCode can return dynamicGridRed or dynamicGridYellow
or something like
styleClass="#{item.colorEBean.useRedCode?'dynamicGridRed':'dynamicGridYellow'}"
another option would be use inline css like:
style="width: 50px;height: 50px;border: 4px solid gray;background:#{item.colorEBean.colorCode}"
INMO , you better not try to manipulate the content of css, just make a bunch of predefined css classes...
but I'm not a css pro , so i might be wrong
I can't modify the font size of the itemLabel in selectOneRadio in jsf, I can change color but not the size.
here is my code:
<h:selectOneRadio style="color:red; font-size:7pt;"
value="#{myBean.choice}">
<f:selectItem itemLabel="one" itemValue="1" />
<f:selectItem itemLabel="two" itemValue="2" />
<f:selectItem itemLabel="three" itemValue="3" />
</h:selectOneRadio>
is their any idea to resolve that?
thank you for your help.
My config: jsf 2 and tomcat 7
It should work fine. Please check the generated HTML with help of among others Firebug. The <h:selectOneRadio> generates a HTML <table> element with the labels in <td> elements. Apparently you've in some CSS stylesheet a declaration something like
td {
font-size: 10pt;
}
which get precedence over the inline font-size:7pt; declaration on the <table> element. You'd need to finetune the CSS. This is best to be done by supplying a normal CSS style class (using inline CSS is a bad practice anyway):
<h:selectOneRadio styleClass="choices">
with
.choices td {
color: red;
font-size: 7pt;
}