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>
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; }
I have the following p:selectOneRadio :
<p:outputPanel id="customPanel">
<p:selectOneRadio id="customRadio" value="#{dyna.selecetedlist}" layout="grid" columns="1">
<c:forEach var="list" items="#{dyna.userlist}" varStatus="loop">
<f:selectItem itemEscaped="true" itemLabel="#{list.id.tbCode}" itemValue="#{list.id.tbCode}" />
</c:forEach>
<p:ajax update=":form1:tabexam,:form1:msg,:form1:colser" listener="#{dyna.updatecolumns}"/>
</p:selectOneRadio>
</p:outputPanel>
which generate this :
What i want is to override the default icons and layout of p:selectOneRadio.
and render it like below:
To customize the icon, override the .ui-radiobutton-icon on your page (there is a cleaner option of including a properly packaged css file):
<style type="text/css">
.ui-radiobutton-icon{
background: url(imgs/icon.png) no-repeat; !important;
}
</style>
EDIT: Override the
.ui-state-hover class to override the default hover style for the component
.ui-state-active clasas to override the default selected style for the component
Note overriding both classes as listed above will affect all the components on that page. Be sure to use a custom namespace when overriding. Take for example
.my-custom-ns .ui-state-hover{
//css
}
And then in your component definition:
<p:selectOneRadio id="customRadio" value="#{dyna.selecetedlist}" styleClass="my-custom-ns" layout="grid" columns="1">
<c:forEach var="list" items="#{dyna.userlist}" varStatus="loop">
<f:selectItem itemEscaped="true" itemLabel="#{list.id.tbCode}" itemValue="#{list.id.tbCode}" />
</c:forEach>
<p:ajax update=":form1:tabexam,:form1:msg,:form1:colser" listener="#{dyna.updatecolumns}"/>
</p:selectOneRadio>
In Primefaces 3.5 vertical align of p:selectOneMenu and button is weird when you put them in one line. My use case is: user chooses option from menu and then click button to activate it. Issue is - both components have to be in the same line (table row).
XHTML is really easy:
<h:form>
<p:selectOneMenu>
<f:selectItem itemLabel="test" itemValue="test"/>
</p:selectOneMenu>
<p:commandButton value="GO"/>
</h:form>
Unfortunately result is not what I expect:
My expectation is rather something line this: or
I tried to research rendered HTML code with Firebug, but honestly, it's hard for me to found any CSS margin, padding, left, top, or anything like that could help me.
Anyone struggled with such issue (and - hopefully - solved it)?
Solution is:
<style type="text/css">
.selectMenu { display: inline-block; vertical-align: top; }
</style>
<h:form>
<p:selectOneMenu styleClass="selectMenu">
<f:selectItem itemLabel="test" itemValue="test"/>
</p:selectOneMenu>
<p:commandButton value="GO"/>
</h:form>
You can use a panelGrid for auto align easily both of them.
<h:form>
<h:panelGrid columns="2">
<p:selectOneMenu>
<f:selectItem itemLabel="test" itemValue="test"/>
</p:selectOneMenu>
<p:commandButton value="GO"/>
</h:panelGrid>
</h:form>
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; }
Is there anyway to indent a set of radio buttons? I want it to look like the following:
o Item 1
o Item 2
o Item 2.1
o Item 2.2
o Item 3
I tried just applying a style to it but it doesn't work.
<style>
.indent {
text-indent: 3em;
}
</style>
<p class="indent">test</p>
<h:selectOneRadio layout="pageDirection" value="#{myBean}">
<f:selectItem itemValue="1" itemLabel="Item 1" />
<f:selectItem itemValue="2" itemLabel="Item 2" /> <!-- also okay if item 2 is not selectable and item 2.1 and 2.2 are -->
<p class="indent">
<f:selectItem itemValue="2.1" itemLabel="Item 2.1" />
<f:selectItem itemValue="2.2" itemLabel="Item 2.2" />
</p>
<f:selectItem itemValue="3" itemLabel="Item 3" />
</h:selectOneRadio>
Have you tried adding a margin instead of indent?
.myIndent {
margin-left: 3em;
}
Have a look at http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/
as well, they cover radio button styling.
I guess you want to display your radio buttons as a list. Add the layout attribute with pageDirection value to the <h:selectOneRadio /> tag component to achieve it:
<h:selectOneRadio layout="pageDirection" value="#{myBean}">
<!-- your items go here... -->
</h:selectOneRadio>