i want to display an image on p:commandButton , i have tried many ways but unable to show the image on the button.Below is the code i have included:
css code:
.ui-icon-myCancel{
background-image: url("#{resources['images/cancel.jpg']}") !important;
}
<p:commandButton icon="ui-icon-myCancel" action="#{cancelMB.cancelList}" update="dataInfo" ajax="true"/>
I have image under WebContent\resources\images\cancel.jpg
The other way i tried modifying the css code as below but still no luck:
.ui-icon-myCancel{
background-image: url(resources/images/cancel.jpg) no-repeat top left !important;
}
other way:
.ui-icon-myCancel{
background-image: url(resources/images/cancel.jpg)
}
Please suggest , where iam going wrong.
An alternative solution is to abandon CSS use here, and rely on a extra nested tag "graphicImage" inside not a commandButton, but a commandLink instead :
<p:commandLink action="#{cancelMB.cancelList}" update="dataInfo" ajax="true" >
<h:graphicImage name="images/cancel.jpg" title="Cancel" />
</p:commandLink>
Related
According to this link:
How to create a custom Facelets tag?
I was able to create a facelet tag files.
A part of my CustomGraphicImage.xhtml file:
<h:graphicImage style="border: #{border}px solid #000000" height="#{height}" width="#{width}" alt="#{alt}" library="image" name="#{value}" />
My test.xhtml file:
<my:ImgPath border="1" value="loading_pt01.gif"></my:ImgPath>
The problem is that when view HTML source code, undefined attributes still appear. In the below example, undefined tags are alt, height, width.
<img src="/demo-project/javax.faces.resource/loading_pt01.gif.xhtml?ln=image" style="border: 1px solid #000000" alt height width>
How can I display only defined attributes?
I'm thinking about using <c:if> to decide to whether display the attributes or not but that seems too much work.
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
I am trying to overriding the Primefaces Theme my css look like this in file1.xhtml
.ui-menubar {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px!important;
background: #D4C5F7!important;
}
In File2.xhtml i have used this css
.ui-menubar {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
background: #557FFF!important;
}
But when i checked in browser its showing file1 css in both places,what i am doing wrong here?
File1.xhtml and File2.xhtml both are in included in File3.xhtml file
See how the code look like
<p:layoutUnit position="north" size="100" id="north"
resizable="false" closable="false" style="border:none">
<ui:insert name="north">
<ui:include src="/template/top_header.xhtml" />
<ui:include src="/template/header_menu.xhtml" />
</ui:insert>
</p:layoutUnit>
CSS is applied on the HTML document as whole. CSS is not applied on a per-include-file basis or so as you seem to think. CSS does not run in webserver. CSS runs in webbrowser, after the webbrowser has parsed the HTML output retrieved from JSF and is presenting it visually to the enduser.
If you want to give a specific component a different style from default, then you should give it a class name.
<x:someComponent styleClass="someClass">
Then you can finetune the CSS selector on that:
.ui-menubar.someClass {
...
}
(name it more sensibly though, e.g. leftMenu, topMenu, etc)
Unrelated to the concrete problem, the !important is here being used as a workaround, not as a solution. Get rid of it and carefully read the following answer, including all of its links, in order to learn how to properly override PrimeFaces default CSS: How do I override default PrimeFaces CSS with custom styles?
a newbie primefaces question:
When I create a simple primeface page, what should I put in order to have the text styled?
<h:body>
<!-- Ok, what I put here to have styled the following H1 and outputText? -->
<h1>Not styled h1</h1>
<h:outputText value="Not styled text." />
</h:body>
</html>
I am able to get styled text by placing it inside a <\p:panel>, but I find that a bit annoying to place everything in panels.
Use css to change it, it's the most elegant solution. You can create your own classes or override existing primefaces ones if you're sure you aren't going to use the original ones. Remember to add !important at the end of the attributes set.
.ui-panel
{
border: black solid 1px !important;
}
You can just follow this tutorial about how and where to add your css reference in order to make Primefaces styles overriden.
I am using t:datalist with JSF 2.0 to allign images horizontally . But i would like to list the properties of each image below the image vertically.Now the properties are also listed horizontally along with images. The code i use is :
<t:dataList var="item" value="#{listItems.dataList}" id="listItems">
<h:graphicImage url="#{item.prodFileName}" width="100" height="100" />
<h:outputText value="#{item.prodName}" />
<h:outputText value="#{item.prodPrice}" />
</t:dataList>
I am not able to use plain html table tag inside the datalist to list the name and price properties below the image. Found a tag named f:verbatim after some search , but i could not make it work either. Tried putting the html table tag inside a panelGroup too.
Wrap them in a left-floating <div> and put the lines below the image by <br>.
<t:dataList var="item" value="#{listItems.dataList}" id="listItems">
<div class="box">
<h:graphicImage url="#{item.prodFileName}" width="100" height="100" />
<br /><h:outputText value="#{item.prodName}" />
<br /><h:outputText value="#{item.prodPrice}" />
</div>
</t:dataList>
With for example this CSS
.box {
float: left;
margin: 5px;
padding: 5px;
border: 1px solid gray;
}
Only make sure that you've a clear: left; on the containing element so that floats don't go beyond the container.
Unrelated to the problem, please keep in mind that <f:verbatim> is deprecated in JSF 2. You should not use it anymore. You also do not need it anymore. In JSF 1.0/1.1 that tag was mandatory in order to be able to use plain HTML tags in a JSF page. Since JSF 1.2 it is not mandatory anymore. You can just inline HTML tags in a JSF page there where you want without fiddling with <f:verbatim>.