This question already has answers here:
How do I override default PrimeFaces CSS with custom styles?
(5 answers)
Closed 7 years ago.
can any one advice on adding a space between a radio button and its label.
do we have any attributes in f:selectItem for doing this
I have to align the radios to the other components of the page. My Labels are aligned but to align the radio, I need to put some space between it and the labels.
I am unable to find any attribute to help me in this.
Please help.
Here is how I recently did this, using primefaces:
<p:column headerText="Is your hair naturally blonde?" width="140">
<p:selectOneRadio value="#{mybean.haircolor}" id="haircolor" layout="custom">
<f:selectItem itemValue="true" />
<f:selectItem itemValue="false" />
</p:selectOneRadio>
<p:panelGrid columns="2">
<h:panelGroup>
<p:radioButton id="hairColorYes" for="haircolor" itemIndex="0"/>
<h:outputLabel for="hairColorYes" value="Yes" styleClass="radiolabelPF"/>
</h:panelGroup>
<h:panelGroup>
<p:radioButton id="hairColorNo" for="haircolor" itemIndex="1"/>
<h:outputLabel for="hairColorNo" value="No" styleClass="radiolabelPF"/>
</h:panelGroup>
</p:panelGrid>
</p:column>
and then my one CSS style:
.radiolabelPF {
margin-left: 5px;
}
The trick was to use layout="custom" in <p:selectOneRadio>. My actual radio buttons and labels are within the <h:panelGroup> tags.
This was the only way I could control the space between the radio label and button in Primefaces. It's also documented in the "custom layout" section of the documentation on selectOneRadio.
http://www.primefaces.org/showcase/ui/input/oneRadio.xhtml
Please use CSS styles for this task - please see this tutorial for examples
Related
I want to display blank value onload of h:selectonemenu without adding blank item in dropdown list. But i am not able to get it.
I tried with a few scenario by adding display:none but to no avail.
I even tried adding css but it too didnt work.
Please find the below code:
<h:selectOneMenu
id="testid" style="width:22%;" maxlength="29"
value="#{myVal.val}" >
<f:selectItem itemLabel="" itemValue="" style="display:none;"/>
<f:selectItems
value="#{myController.animalsData}" var="data" itemLabel="#{data.animalName}"
itemValue="#{data.animalCode}" />
</h:selectOneMenu>
I using a simple h:panelGrid for displaying the table how could i specify styles for the table to make it better. i am a bit confused with all the stuff i looked online
This is what the code that i have been using
<h:panelGrid id="panel" columns="2" cellpadding="10"
cellspacing="1" style="align:center;">
<f:facet name="header">
<h:outputText value="Registration" />
</f:facet>
<h:outputText value="User Name:" escape="false" />
<h:inputText value="Hello World" />
<h:outputText value="Password:" escape="false" />
<h:inputSecret value="" />
</h:panelGrid>
Could you please specify the list of opssible optons for specifying the css or inline styles for elements in jsf
Thanks in advance
Don't try to use inline styles. Since jsf is a html code generator in this regard, inline styles ofthen do not apply to the html element you want them applied to. Use the styleClass attribute,and create css with the right selectors for the html elements you want to style. Use the apllied class in those selectors
See also
How to align items in a <h:panelGrid> to the right
I have one strange issue on UI. I have been using JSF and PrimeFaces. Whenever i am hovering my mouse on the labels of my fields my mouse icon changes to the one that appears when we click on links. But nothing happens on click. But the change of the mouse icon has been serious concern. Please find below code for one of my fields. Is there any property that i need to add to stop it. Any help much appreciated. THanks.
<p:outputLabel for="contactName" value="Contact Name: " style="font-size:11px;" />
<p:selectOneMenu id="contactName" style="width:150px" value="#{someBean.value}">
<f:selectItem itemLabel="All" itemValue="All" />
<f:selectItem itemLabel="Y" itemValue="Y"/>
<f:selectItem itemLabel="N" itemValue="N"/>
</p:selectOneMenu>
I have a p:selectOneMenu in xhtml. But the list is not displaying properly. The list have near to 70 items. When I click on the selectOneMenu, the list populate upwards instead without scrollbar and I can't see all the items.
<td valign="top"><p:selectOneMenu id="fr1022_combo_box_ctpy"
value="#{pc_Fr1022.w_facility.ctpy}" styleClass="selectOneMenu">
<f:selectItems value="#{pc_Fr1022.w_facility.facilityCtpyList}"></f:selectItems>
</p:selectOneMenu>
</td>
I believe the way you have used f:selectItems is incorrect.
It should be
<f:selectItems value="#{pc_Fr1022.w_facility.facilityCtpyList}" var="facility"
itemLabel="#{facility.name}" itemValue="#{facility.value}" />
HTH
how can i set the header style of the p:panel component? i want to set the height of the panel_header div.
<p:panel id="panel"
toggleSpeed="500" toggleable="true">
<f:facet name="header" >
<p:outputPanel style="float:left;">
<p:commandButton process="#this" id="new"
oncomplete="dialog.show();" icon="ui-icon-plus" />
<p:spacer width="15px;" />
</p:outputPanel>
<h:outputLabel value="Title" />
</f:facet>
</p:panel>
You normally use CSS for styling. Use the .ui-panel .ui-panel-titlebar selector. You can find the CSS selectors and all its properties in every bit decent webbrowser developer toolset. In Chrome, IE9 and Firebug, rightclick the titlebar and choose Inspect Element or press F12.
Here's an example how it look like in Chrome:
To start, you could set the padding to 0.
.ui-panel .ui-panel-titlebar {
padding: 0;
}
Put this in a .css file which you load by <h:outputStylesheet> inside <h:body>, so that it get loaded after PrimeFaces default CSS.
See also:
How do I override default PrimeFaces CSS with custom styles?
Enclose the p:panel in <h:form prependId="false">.
Then you can use the ID selector (as mentioned in the other reply), as the id will not change.
.ui-panel-titlebar {
//Your style-sheet code
}
Adding a header facet to the panel is a good solution if you just need to change one panel. Inside the facet add any styling you require.
<p:panel>
<f:facet name="header" style="font-size: medium">
</f:facet>
</p:panel>
I avoid messing with the primefaces styling as much as possible if I just want to change individual components.