I am using jsf2 with primefaces.
h:selectOneRadio
f:selectItems
h:selectOneRadio
This produces a radio button and the input label inside the same td such as
<td>
<input type=radio> </input>
label
</td>
My problem is I need to add space between the radio button and the label.
(X)C121 Active
(X)LRM
In the above radio button list I need to add space such as
(x) <---Space--> C121 Active
(x) <--Space --> LRM
What is the best way I can add space for this ? Need help. Sorry as I am new for JSF I could not figure-out a solution.
P.S (x) represents a radio button
Tech Stack : JSF 2.0, Spring 3.x , Hibernate 4.x.
I think some styling like this would be appropriate:
input[type=radio]{
margin-right: 7px;
}
Put it in <style>-tag in h:head or better yet in an external css-file you include with h:outputStylesheet.
This way, you'll target them all without further code.
Related
As title stated, I want to put icon and badge beside the title of submenu of Panel Menu. However, Primefaces' submenu default icon is the expand arrow/triangle. When I do this:
<p:badge value="2">
<p:submenu icon="pi pi-envelope">
</p:badge>
It will prompt error, and doing vice versa like wrapping badge and closing using </p:submenu> is impossible because there are menuitems also. Not to mention the icon is not showing.
So, can I really achieve this using free open source provided? Or this is exclusive to paid user only?
Example from Primefaces template
Badges are not supported on (sub)menu items at this moment (PrimeFaces 11). No matter if you use a free or paid theme. The only component that currently supports a badge on a child node is p:speedDial. What you can do is open a feature request and if possible submit a pull request.
See also:
https://github.com/primefaces/primefaces/issues/7898
https://github.com/primefaces/primefaces/pull/7922
Environment: JSF 2.2.14, PrimeFaces 6.2
I have my command button set up as below, when the button is disabled, title will show up (when hovered over) in PF6.1, but won't show in PF6.2
<p:commandButton id="removeCmd" icon="fa fa-times"
actionListener="#{controller.remove()}"
update="#form"
disabled="#{ontroller.isCommandDisabled()}"
style="width: 20px; height:20px;margin-left: 5px;"
title="#{controller.isCommandDisabled() ? 'Command disabled due to user privilege' : 'remove selected item'}"
onstart="PF('bui').show(); PF('bar').show();"
oncomplete="PF('bui').hide(); PF('bar').hide();"
styleClass="removeCmd"/>
Title show up fine when button is not disabled.
Does anyone encounter the same problem? I also tried to wrap my p:commandButton inside h:panelGrid and use p:tooltip with it, not working either.
UPDATE: issue created on github: https://github.com/primefaces/primefaces/issues/3656
By nature I'm curious (and I follow the changes in PrimeFaces a little). If the title of a button does not work anymore between 6.1 and 6.2 I start analyzing a little. The generated html for a button in both PrimeFaces versions is identical. This makes me think whether it would have stopped working for other components as well. So I created a simple page
<p:inputText title="myInput enabled" />
<p:inputText title="myInput disabled" disabled="true"/>
And the behaviour change between using PrimeFaces 6.1 and 6.2 was the same. Title working for both in 6.1 and only for the first in 6.2. Since there was a major jquery change between PrimeFaces 6.1 and 6.2, I posted 'jquery show title tooltip of disabled inputs and buttons' in google.
One of the hits was:
Show tooltip for disabled items
In it there was a reference to some css(!) that disables dom events and consequently not showing titles.
pointer-events: none;
I opened my browser developer tool and in the filter part in the css tab, I put 'pointer'. When using 6.1, there was nothing there, but in 6.2 there was.
.ui-state-disabled {
cursor: default !important;
pointer-events: none;
}
Which seems to be coming from the components.css file (according to my browser developer tool). This is not a file that exists in the PrimeFaces repository but one that is created when the PrimeFaces release is build via maven:
One of the files that is included here is the jquery-ui.css and in it is the piece of css referenced above.
When I disabled the corresponding pointer-events: none in my browser developer tool, the titles became visible both for the input and the button.
So if you want to override this, please set this to 'all' (or any other value of your liking).
html .ui-state-disabled {
pointer-events: all;
}
See also
How do I override default PrimeFaces CSS with custom styles?
This is probably a CSS problem, but I cannot understand the reason by myself.
I often found some selectonemenus behaving like the one in picture:
The dropdown field is "covered".
Then I click it, select a value and... it starts displaying correctly.
I am using Cupertino theme.
If I analyze the generated source, here's what I find:
<div class="ui-helper-hidden-accessible">
<input id="carrello:formCarrello:j_idt165_focus" name="carrello:formCarrello:j_idt165_focus" type="text">
</div>
<label id="carrello:formCarrello:j_idt165_label" class="ui-selectonemenu-label ui-inputfield ui-corner-all" style="width: 0px;">
Seleziona...
</label>
The label has "width:0px;". If I remove it, the menu is displayed correctly.
Good but... I DID NOT add that attribute. Why is Primefaces adding it?
EDIT
The source of the first menu:
<p:selectOneMenu value="#{posController.rigaVendita.codiceIva}" effect="fade" converter="codiceIvaConverter">
<f:selectItem itemLabel="Seleziona..." itemValue="" />
<f:selectItems value="#{posController.codiciIva}" var="ci" itemLabel="#{ci.codice}" itemValue="#{ci}" />
</p:selectOneMenu>
The same problem in all browser.
It isn't a css compatibility issue, the fault is the "0px" width attribute!
Ok I finally found what caused the bug!
I had the same problem with selectOneMenu label.
It is because I used the default forward page navigation, that's why in some pages components were working and not in other pages.
Actually it's not working when the url is not matching the page.
Solution : concat view id with "?faces-redirect=true" in action attribute of commandLink or commandButton
This can help:
http://www.mkyong.com/jsf2/jsf-page-forward-vs-page-redirect/
http://www.mkyong.com/jsf2/implicit-navigation-in-jsf-2-0/
The same problem occurred with the PrimeFaces google map component <p:gmap> you need also to use redirection if you want to use it
( And there is another problem: if you are using a template you have to put
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>in the template.xhtml, see (primefaces GMmap inside a dialog not rendering) )
EDIT
And apparently it's OK:
PrimeFaces does not support forward based navigations within an ajax request, you need to do redirect instead or set ajax to false.
http://primefaces.org/faq.html
I've just had the same problem. I guess it was a bug of primefaces. My solution is to override zero width of that element — just add this code into your CSS file:
.ui-selectonemenu-label{
width: 100%!important;
}
I had the same problem and the solution consists in over write the css of the selectOneMenu in this case, correspond to two selectors, that are the following:
.ui-selectonemenu .ui-selectonemenu-trigger{
width: auto !important;
padding-top: 0.4em;
}
.ui-selectonemenu{
padding-right: 0px !important;
}
See the image before correction
See the image after correction
How do I style a primefaces components & specify their positions on web pages ? Links to any sample downloadable application would be highly appreciated.
Position of components:
Primefaces has some components that have position attribute(s) such as p:dialog:
<p:dialog header=”Header Text” widgetVar=”dialog” position=”10,50”>
...
</p:dialog>
In the example the position is given as [x,y] pair related to the top left corner of the browser window. Values such as "top", "bottom", "left", "right" or "center" are also allowed here. If the attribute is omitted, the position of a dialog is centered.
For all other components css positioning can be use either defined by the style or styleClass attribute which is available for a lot of Primefaces components or defined in a separate css layout.
The following example sets an absolute position for the p:dataTable:
<p:dataTable value="#{testBean.selectOptions}" var="item"
style="position:absolute; top:50px; left:240px;">
Primefaces even comes with an own p:layout tag that can be used for positioning as well.
Style
This can be accomplished using Primefaces themes. Furthermore, the Primefaces documentation (you have to pay for since version 2.1) lists all css style classes for each component. You can adapt them to fit your needs.
I would like to read the selected role information on form submit (a role is selected for a user from a list of roles). How do I read the selected radio button value in my EntityHome interface (Note: I didn't want to use the h:selectOneRadio option here)
<tr>
<s:div rendered="#{userHome.instance.type ne 'admin'}">
<th width="150" class="rich-table-subheadercell center">#{_user.getName()}</th>
</s:div>
<c:forEach items="#{userHome.instance.roles}" var="_role">
<td width="150" class="center" style="background: rgb(100, 100, 100) none repeat scroll 0% 0%;">
#{_role.name}
<input type="radio" style="display : none" name="#{userHome.instance.id}" value="#{_role.id}"/>
</td>
</c:forEach>
</tr>
Two comments.
First of all. Use JSF Components where you can.
Secondly. Avoid using JSTL tags. Remove the c:forEach if you don't have to use it. Replace it with ui:repeat, h:dataTable etc.
Now to answer your question for a workaround if you can't directly use h:selectOneRadio
What you will have to do is use #WebRemote in Seam, and then by using javascript you can on form submit, set the value through Ajax in your UserHome component.
Take a look at chapter 5. Remoting in the Seam Documentation for more information on how to use Remoting.
You need to point the value / list to an ArrayList of SelectItem there's where the items you selected will be stored.