Is there a way to align the tabs to the right?
I tried to play with style="text-align:right;", as they do in yui - but it doesn't seem to work.
In order to solve this problem we need to override Primefaces' jquery-ui.css property.
1.Create a new css containing:
.ui-tabs .ui-tabs-nav li{float:right!important;}
(name it tab_view_align_right.css, and put it under web/resources/css).
2.Add
<h:head>
<h:outputStylesheet name="css/tab_view_align_right.css"/>
</h:head>
to the JSF file.
I know that it was an old post but I found new solution:
<p:tab titleStyle="float:right".../>
Related
I have a selectOneMenu with a styleclass.
Can someone write me how to style the items inside?
I'm trying to access them via styleclass.
I can change the stylings general by doing
.ui-selectonemenu-items-wrapper {font-size:13px;}
however it doesn't work via a styleClass which I have added to the selectOneMenu
<p:selectOneMenu styleClass="someClass"...
It wont work like this:
.someClass .ui-selectonemenu-items-wrapper {
font-size:13px;}
I can't get a custom icon to my commandButton as explained in lots of other questions.
Folderstructure:
web/resources/icons/plus.png
web/resources/css/style.css
style.css:
.ui-icon-myAdd{
background-image: url("#{resource['icons/plus.png']}") !important;
}
header:
<h:head>
...
<h:outputStylesheet name="css/style.css"/>
</h:head>
button:
<p:commandButton value="..." icon="ui-icon-myAdd"/>
If I use styleClass instead of icon, my button's background is set to the image I'm trying to use as icon (which should be correct). So i guess there is no problem with the pathing.
Still the icon of my button is empty using the icon-tag.
Where am I wrong? What am I missing?
I've tried everything I found so far. Might be something pretty basic as I just started with JSF and primefaces.
I use:
PrimeFaces-5.2
Mojaara-2.2.1
IntelliJ IDEA 2016.2
Tomcat 9.0.0.M8
I want to use jQuery ui-icon-close instead of ui-icon-cancel. So I go to the fileupload.js file in the primefaces jar (3.3.1), change the reference to ui-icon-cancel to ui-icon-close (line#2082, upload template). But it doesn't work. Any idea? Thanks.
I found an easier way to solve this problem:
I added an id to my fileupload control:
<p:fileUpload id="related_file" ..../>
Then in my css, I add the following lines:
div[id*=related_file] .ui-icon-cancel{
background-position: -96px -128px !important;
}
This works and the cancel button ends up using the ui-icon-closeThick icon.
But I would still like to know why my original approach didn't work if anybody knows the answer. Thanks.
I would like to know if there is a way of disabling the radio-based row selection for a given set of rows in Primefaces, based on a bean property.
Example:
<p:dataTable var="foo" value="#{bean.foos}" selection="#{bean.selectedFoo}">`
<p:column selectionMode="single" />
<p:column>
<h:outputText value="#{foo.bar}" />
</p:column>
<p:dataTable>
In this case, imagine I would like to disable the rows where foo.bar == 1,5,10, by disabling the rows I mean disable the radio button associated with the row.
I couldn't figure out a way of accomplish that... any ideas? Even a css + javascript hack solution would be acceptable.
Since 4.0 version, Primefaces datatable comes with a disabledSelection property.
<p:dataTable var="foo" value="#{bean.foos}" selection="#{bean.selectedFoo}" disabledSelection="#{foo.bar == 1}">
<p:column selectionMode="single" />
<p:column>
<h:outputText value="#{foo.bar}" />
</p:column>
<p:dataTable>
Then, when foo.bar == 1 is true, checkbox will be disabled.
I encountered this same issue where I wanted to disable only certain rows from selection (single or multiple) based on a bean property. The short answer for me was to just hide the radio/checkbox on that row so it could not be selected. My needs required me to be able to process additional selections at run-time. This meant that I had to be sure the row(s) were un-selected physically before any further selections were made so they weren't re-processed in subsequent processing, so beware of that condition.
Here's what I did, for others that may stumble upon this question in the future.
1) In the p:datatable I added the rowStyleClass attribute, and based on the bean criteria, provided a class, such as: 'is-selectable' or 'not-selectable'.
rowStyleClass="#{myBean.alreadyProcessedList.contains(item) ? 'not-selectable' : 'is-selectable'}"
In my run-time process, selected rows were added to this list so they would be made 'not-selectable' once the form was rendered again after processing. Your initial load should have the non-selectable rows already added to the list, or handle through whatever condition you need in your case.
2) Define CSS to make the .not-selectable hide the radio/checkbox. Using '!important' was necessary to override the in-line styling.
tr.not-selectable div.ui-radiobutton,
tr.not-selectable div.ui-chkbox {
visibility: hidden !important;
}
You can try disabling with Jquery as follows
<script type="text/javascript" src="jquery.js"></script>
<script>
$(function(){
$("#myform input[type = radio]:nth(1)").attr('disabled', 'disabled');
});
</script>
myform:your Form Name
Inplace of nth(1)
you can mention the row number to be dispbled.
Set the Property disabledSelection (Disables row selection when true. Overrides
p:column's disabledSelection attr. Example:
var="xxx" disabledSelection="#{xxx.year >
1960}"
I have an iFrame in my page looking like this:
<h:panelGroup id="gameDiv">
<f:verbatim>
<iframe src="/levelup/resources/#{cc.attrs.src_dir}/#{cc.attrs.src_html}" width="700px" height="800px" frameborder="0" id="gameFrame">
</iframe>
</f:verbatim>
</h:panelGroup>
Basically, the "src" variable is bound using JSF 2.0 EL, and gets its value from a backing bean.
I then use a form to update this value, and refresh the whole page. In the rendered HTML, I can see that the "src" for my div has been updated. However, the HTML page still shows the old one.
I thought the issue was similar to 2 iframes with the same display even if the src are different, and I tried the solutions that have been mentioned (using a timestamp to make the src unique, or resetting them to "about:blank" on each page load). None of them worked however.
For information, the form that updates the backing bean is:
<h:form id="gameSelectionForm">
<h:selectOneMenu id="gameSelection">
<f:selectItems value="#{gameBean.gameIds}" />
</h:selectOneMenu>
<p:commandButton id="gameSelector" action="#{gameBean.changeGame}" update="gameScoreFieldset, gameDiv" />
</h:form>
Any hint would be much useful.
Thanks in advance,
Sébastien
You're changing the src of the iframe using JS/Ajax, but not reloading its content.
There are 2 ways to fix this:
Just don't use JS/ajax. A synchronous HTTP request will reload the entire document and thus automagically reload the iframe.
<p:commandButton ajax="false" />
Use JS to force reload. Add the following after the <iframe>.
<script>document.getElementById('gameFrame').location.reload()</script>
Oh, you definitely need to remove the <f:verbatim>. Since JSF 1.2 that tag is utterly useless.