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>
Related
I have a selectOneRadio element with layout="custom" inside a dataTable. Below is the xhtml code-
<p:dataTable var="varlist" value="#{testbean.testlist}">
<p:column headerText="Choose Option" width="120">
<p:selectOneRadio id="customRadio" value="#{varlist.varlistValue}"
layout="custom" required="true">
<f:selectItem itemValue="10" />
<f:selectItem itemValue="20" />
</p:selectOneRadio>
<h:panelGrid columns="1">
<h:panelGroup>
<p:radioButton id="opt1" for="customRadio" itemIndex="0" />
<h:outputLabel for="opt1" value="OPTION 1" styleClass="radiolabelOption"/>
</h:panelGroup>
<h:panelGroup>
<p:radioButton id="opt2" for="customRadio" itemIndex="1" />
<h:outputLabel for="opt2" value="OPTION 2" styleClass="radiolabelOption"/>
</h:panelGroup>
</h:panelGrid>
</p:column>
</p:dataTable>
<style type="text/css">
.radiolabelOption {
margin-left: 10px;
}
</style>
So this is how it appears in browser-
As we can see, the outputLabel appears to the bottom with respect to radioButton. But i want that to look centre, w.r.t radioButton as shown below -
I tried below lines of code like
style="display:block; text-align:center" OR
style="margin: 0 auto;"
But none of them produces the desired result.
So How to do it?
Give <h:panelGroup> these styles
.panelGroup{
display: flex;
align-items: center;
}
Version :
Apache MyFaces 2.0
Rich Faces 4.3
Issue :
We are migrating from JSF 1.2 to JSF 2.
As there is no built-in support for sorting for rich:dataTable , we are using custom sorting solution as per rich faces showcase.
The sorting works fine , only issue is since a4j:commandLink is used for sort action trigger , the column header text is coming with "underline" style.
Is there any way the underline can be removed for a4j:commandLink ?
The rich faces showcase doesn't show any styling for a4j:commandLink ?
Please help.
You need setup styleClass attribute for h:commandLink in column header.
Style
.tableColumnHeader {
text-decoration: none;
color: black;
}
is used like this:
<rich:dataTable id="txnTable" rows="#{referenceData.recordsPerPage}"
style="width: 100%" rowClasses="oddrow, evenrow"
value="#{bean.transactions}" var="res" sortMode="single">
<rich:column id="activityDate" sortable="true"
sortBy="#{res.activityDate}" sortOrder="descending">
<f:facet name="header">
<h:commandLink value="#{msg.transDate}" styleClass="tableColumnHeader">
<rich:componentControl target="txnTable" operation="sort">
<f:param name="column" value="activityDate" />
<f:param value="" />
<f:param name="reset" value="true" />
</rich:componentControl>
<h:graphicImage value="/images/sort/sort_asc.gif"
style="border: 0px; vertical-align: middle;"
rendered="#{bean.transactions.order == 'activityDate ASC'}" />
<h:graphicImage value="/images/sort/sort_des.gif"
style="border: 0px; vertical-align: middle;"
rendered="#{bean.transactions.order == 'activityDate DESC'}" />
<h:graphicImage value="/images/sort/sort_uns.gif"
style="border: 0px; vertical-align: middle;"
rendered="#{bean.transactions.order != 'activityDate ASC'
and bean.transactions.order != 'activityDate DESC'}" />
</h:commandLink>
</f:facet>
<h:outputText value="#{res.activityDate}" />
</rich:column>
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>
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>