In JSF 2.0 I have below
<h:selectOneRadio value="#{StageGate.sketchesSG002006Decision}" onclick="validateMyRadioButton()" id="radio26">
<f:selectItem itemValue="Accepted" itemLabel="Accepted" id="accepted"/>
<f:selectItem itemValue="Rejected" itemLabel="Rejected" id="rejected"/>
</h:selectOneRadio>
I get output as
O Accepted O Rejected
^^
What I want is add space between two radio button so that output would be
O Accepted O Rejected
^^^^^^^^^^^
I tried adding between two radio button however it is not working. I am getting radio button on next line.
<h:selectOneRadio value="#{StageGate.sketchesSG002006Decision}" onclick="validateMyRadioButton()" id="radio26">
<f:selectItem itemValue="Accepted" itemLabel="Accepted" id="accepted"/>
<f:selectItem itemValue="Rejected" itemLabel="Rejected" id="rejected"/>
</h:selectOneRadio>
Any idea how this can be done?
HTML generated without is
<table id="radio26">
<tr>
<td>
<input type="radio" checked="checked" name="radio26" id="radio26:0" value="Accepted" onclick="validateMyRadioButton()" /><label for="radio26:0"> Accepted</label></td>
<td>
<input type="radio" name="radio26" id="radio26:1" value="Rejected" onclick="validateMyRadioButton()" /><label for="radio26:1"> Rejected</label></td>
</tr>
</table>
When I add   one space is generated before <table id="radio26"> statement.
Disclaimer, I don't know anything about JSF, so the following is based on my experience of ASP.NET and adding spaces in there. If this is wildly incorrect, please let me know, and I will remove immediately...
Try adding the space to the item label, updating...
<f:selectItem itemValue="Accepted" itemLabel="Accepted" id="accepted"/>
To...
<f:selectItem itemValue="Accepted" itemLabel="Accepted " id="accepted"/>
It might need to be escaped itself into...
<f:selectItem itemValue="Accepted" itemLabel="Accepted " id="accepted"/>
UPDATE
As the OP says in the comments, this will extend the link.
Looks like you should be able to set a CSS class to the parent object with something like...
<h:selectOneRadio styleClass="myRadioCtrl" ... >
And then in your style / CSS have something like...
.myRadioCtrl span { padding-right: 10px; }
Just thought id share my answer... after inspecing the page with firebug i ended up with the following
JSF:
<h:panelGroup id="search-options" layout="block" styleClass="radioButtonSpace">
<h:selectOneRadio value="#{searchEngineController.reportSearch}">
<f:selectItem itemValue="#{false}" itemLabel="CEPIS Search" />
<f:selectItem itemValue="#{true}" itemLabel="Report Search" />
</h:selectOneRadio>
</h:panelGroup>
CSS:
.radioButtonSpace table tbody td {padding-right:50px;}
I was having difficulties with this. Applying Style did not work for me when I did it on h:selectOneRadio, however it worked when applied in panelgroup wrapping around it.
Nothing of these answers worked for me, but like this works perfectly:
.ui-selectoneradio label{ padding-right: 10px !important; }
This is in case using primefaces
Related
I have a dataGrid with 2 columns and a panelGrid inside it that shows the data correctly, but it fills both columns before changing row. I need it to fill first column, with half of list content and only then go to second column and fill it with rest. It is a static list with an even number right now, but it would be best if it could be done with a dynamic sized list with possible odd total number of values. There is an answer here in SO that shows that asp has a repeatcolumn tag that (if i understood correctly) does what i need. Is there a way to do that using richfaces in jsf?
<fieldset>
<legend>Select topics:</legend>
<rich:dataGrid value="#{registerForm.topics}"
var="topic"
columns="2">
<h:panelGrid columns="2" width="430px"
columnClasses="checkTopic,labelTopic" border="0">
<h:selectBooleanCheckbox id="checkTopic"
align="left"
value="#{registerForm.SelectedTopic}"
disabled="#{not registerForm.ActiveRegister}"/>
<h:outputLabel value="#{topic.description}"
for="checkTopic" />
</h:panelGrid>
</rich:dataGrid>
<h:panelGroup rendered="#{empty registerForm.topics}"
style="color: red;">
No topics registered.
</h:panelGroup>
</fieldset
I think I should use ui:repeat, but cant figure out how. I tried using dataList and dividing the list in 2 parts and each shown in a separed row, but didnt look good, also the code feels overcomplicated than it should be.
Also this question is the same as mine, but the answer doesnt correspond exctly to what is needed and i cant comment because 50 reputation.
I need:
Value1 Value3
Value2 Value4
With the code I have(and the answer) the result is:
Value1 Value2
Value3 Value4
Well you can't change the direction of the items, but you can reorder the list so instead of [1,2,3,4,5] you'll have [1,4,2,5,3].
Alternatively you could use the rendering index (rowKeyVar) and have your bean do the math figuring out what item should be displayed (essentially ignoring the list you're passing to the component).
Solved the issue using two DataTables and the "first" attribute. Had to create "getLines" class in backend, that returns listsize/2 (roundup), because I couddnt figure out how to do it in front end (but plan on doing).
<fieldset>
<legend>Select topic:</legend>
<h:panelGrid id="topicspanel" columnClasses="topicscol,topicscol" columns="2" border="0">
<rich:dataTable value="#{registerForm.topics}"
var="topic" columns="1" rows="#{registerForm.lines}"
border="0" id="table1">
<rich:column>
<h:panelGrid columns="2" width="430px"
columnClasses="checkTopic,labelTopic" border="0">
<h:selectBooleanCheckbox id="checkTopicCol1" align="left"
value="#{registerForm.selectedTopic}"
disabled="#{not registerForm.activeRegisters}" />
<h:outputLabel value="#{topic.name}"
for="checkTopicCol1" />
</h:panelGrid>
</rich:column>
</rich:dataTable>
<rich:dataTable value="#{registerForm.topics}"
var="topic" columns="1" rows="#{registerForm.lines}"
border="0" id="table2" first="#{registerForm.lines}"
align="right">
<rich:column>
<h:panelGrid columns="2" width="430px"
columnClasses="checkTopic,labelTopic" border="0">
<h:selectBooleanCheckbox id="checkTopicCol2" align="left"
value="#{registerForm.selectedTopic}"
disabled="#{not registerForm.activeRegisters}" />
<h:outputLabel value="#{topic.name}" for="checkTopicCol2" />
</h:panelGrid>
</rich:column>
</rich:dataTable>
</h:panelGrid>
I am trying to render a data table using ajax (BootsFaces) according to the values provided in the form. Unfortunately, desired part does not render. I can see the ajax request is going in the network tab, but it does not do anything (Area does not render and this searchPartialBean.getSearchList() method does not get called). Below is my code snippet. Is there any issue in the way I am doing it ?
<b:tab title="Search">
<h:form>
<b:row>
<b:column mediumScreen="7">
<b:inputText placeholder="Telephone number" label="Telephone number"
value="#{searchPartialBean.telephoneNumber}"/>
<b:inputText placeholder="First name" label="First Name"
value="#{searchPartialBean.firstName}"/>
<b:inputText placeholder="Last name" label="Last Name"
value="#{searchPartialBean.lastName}"/>
<b:commandButton look="primary" id="search-form-submit" value="Search"
update="serach-results-table"/>
</b:column>
<b:column mediumScreen="5">
<b:alert severity="info" title="Info">
This will contain the search help.
</b:alert>
</b:column>
</b:row>
<br />
<b:panel id="serach-results-table">
<b:dataTable rendered="#{searchPartialBean.valuesPresent}" value="#{searchPartialBean.getSearchList()}" var="patient">
<b:dataTableColumn label="Date" value="#{patient.firstName}"/>
</b:dataTable>
</b:panel>
</h:form>
</b:tab>
You've wrapped a form in a tab. Both widgets define a namespace, which, in turn, adds a prefix to the id of each widget within. Probably that's the problem.
My first approach would be to add a colon to indicate you're searching in the inner namespace:
update=":search-results-table"
If that doesn't work, you can use the recursive search expression of BootsFaces:
update="**:search-results-table"
However, my favorite approach is to use a CSS pseudo class like so:
update="#(.search-results-table)"
<b:panel styleClass="search-results-table">
i cannot find an answer on google. I have a select box and i want to expand the input field to have a select box stretched by at least 3 rows. I know that with html it's just a simple 'size="3"' but the project i am working on is using primeface - xhtml and the selectbox is as below
<p:selectOneMenu id="areas" value="#{beanMb.item}" class="form-control" style="width:100%;" required="true" >
<f:selectItem itemLabel="Select One" itemValue="" />
<f:selectItems value="#{anotherbeanMb.itemSelectItem}" itemLabel="anotherbeanMb.itemSelectItem.descricao" itemValue="anotherbeanMb.itemSelectItem.codArea" />
</p:selectOneMenu>
PrimeFaces does not use a <select> element to render the p:selectOneMenu component, try using a css style to define the min-height of the div that contains the list of elements
something like this:
div[id$="areas_panel"] .ui-selectonemenu-items-wrapper {
min-height: 100px !important;
}
I've inserted a Primefaces Slider on my page with very basic settings, the problem is once I click on its button, it doesn't stop moving with mouse. it doesn't a matter where in the page the mouse pointer is. The Slider button follows the mouse position to right or left. does any body an idea how to solve the problem?
<h:outputLabel styleClass="form-label-top-right" for="area">Area:
<h:outputText id="output" value="#{formbean.selectedArea}"/> Km
<h:inputHidden id="area" value="#{formbean.selectedArea}" />
<p:slider animate="true" display="output" minValue="0" maxValue="15" step="3" id="areaSlider" for="area" style="margin-top:6px; cursor: pointer" />
</h:outputLabel>
I think it is the way you used h:outputLabel to contain these other tags not allowing the mouseup event to bubble up. Use a h:panelGrid with four columns instead.
For example:
<h:panelGrid columns="4">
<h:outputLabel styleClass="form-label-top-right" for="output" value="Area:" />
<h:panelGroup>
<h:outputText id="output" value="#{formbean.selectedArea}"/>
<h:outputText value="Km"/>
</h:panelGroup>
<h:inputHidden id="area" value="#{formbean.selectedArea}" />
<p:slider animate="true" display="output" minValue="0" maxValue="15" step="3" id="areaSlider" for="area" style="margin-top:6px; cursor: pointer" />
</h:panelGrid>
Problem resolved. It was the "FireQuery" Plugin for FireFox which caused the problem. uninstalling that
I have the following code:
<h:outputText id="dateVal" value="#{items.date}">
<f:convertDateTime pattern="MMM-yy" />
</h:outputText>
How can I display the value #{items.date} in bold?
Just do:
<h:outputText value="AAAAA" style="font-weight:bold"/>
and this code will output the following html:
<span style="font-weight:bold">AAAAA</span>
How about enclosing it in a span to make it bold or adding a css style and applying it.
<span style="font-weight:bold">My Value Bold!</span>
or rather
<h:outputText value="AAAAAAA" style="font-weight:bold" />
You should use styleClass rather than style for easier change and maintenance
<h:outputText value="#{bundle.Label_place}" styleClass="recordLabel"/>
with a style defined in a shared style sheet you can use everywhere
.recordLabel {
font-weight:bold;
}