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;
}
Related
I try to change the size of a checkbox in bootstrap. I try it like this:
css:
.big-checkbox {width: 100px; height: 100px;}
HTML bootstrap:
<label class="big-checkbox">
<input type="checkbox" name="optradio">Reeks
</label>
#section scripts{
<link href="#Url.Content("~/Content/Stickerprinter.css")" rel="stylesheet" type="text/css" />
}
But I dont see changing the size.
Using width and height you can't change the dimensions of an input checkbox. In this way change the area of click but checkbox remain the same.
You can use this:
input[type=checkbox] {
transform: scale(1.5);
}
Check the difference: https://jsfiddle.net/88v0gq20/
You can use for bootstrap this plugin: http://plugins.krajee.com/checkbox-x/demo
Or you could create custom checkbox like in this tutorial: https://kyusuf.com/post/completely-css-custom-checkbox-radio-buttons-and-select-boxes
Try like this :
.big-checkbox > input {width: 100px; height: 100px;}
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;
}