I am using <p:fileUpload> tag for file upload functionality. But I need to change the text box size which I am unable to.
<h:outputLabel id="attachment_label" value="Add Attachment(s)" styleClass="atf-label" />
<p:fileUpload value="" mode="simple" style="width:350px"/>
I tried to set the width in CSS, but it didn't have any effect.
I've done a bit of testing to see if this was possible. Primefaces translates the simple fileUpload as :
<input type="file" id="fileUploadForm:j_idt90" name="fileUploadForm:j_idt90" style="">
This is basicly the standard browser input field of the type file, meaning on chrome, firefox, ie... ect it will all look differently. Now in my locale the standard size of this box is 238px, and by increasing the width of the input type, I do see the box surrounding the upload to grow larger, but sadly the textbox and button don't follow.
If you want the fileupload to be different i would suggest looking at the advanced mode for the fileupload. You can see it at work on the primefaces showcase : http://www.primefaces.org/showcase/ui/fileUploadSingle.jsf
Edit: I forgot to test it in IE8 (Only have ie8 on this computer). In chrome the text is an output text, in firefox it is in an inputtext field that can't grow larger, but on IE8 if i add the width:
<p:fileUpload value="#{fileUploadBean.file}" mode="simple" style="width:500px;"/>
The inputbox does grow larger.
This is the big limitation in the file upload functionality for a long time.Primefaces FileUpload is not an exception to this scenario.So, there is no way to change the Width of the input text box. If you want more info and other options check this anwser :
Can we change <input type="file"> style?
Primefaces p:fileUpload text size increased by applying inputField styleClass.
style.css
.inputField {
width: 350px !important;
}
fileUpload.xhtml
<p:fileUpload id="imageId" mode="simple" styleClass="inputField"></p:fileUpload>
Related
Primefaces 7.0, JSF 2.1.19
I am trying to replace richfaces 3.3.3 with primefaces 7.0 (and upgrade JSF to 2.1) and got a special behaviour from the fileUpload widget: When I first render the page it works without problems (no fileupload done, just render it), then I navigate again to the same page it is broken:
The fileupload component:
<p:fileUpload disabled="#{antragAttachments.fileUploadDisabled}" id="attachmentUpload" widgetVar="attachmentUpload" binding="#{antragAttachments.fileUpload}"
fileUploadListener="#{antragAttachments.fileUploadListener}" label="Durchsuchen..." uploadLabel="Datei anhängen" cancelLabel="Abbrechen" invalidFileMessage="test typ"
mode="advanced" fileLimit="1" sizeLimit="15728640" invalidSizeMessage="Der Dateianhang ist zu groß! Die maximale Größe beträgt 15MB!" previewWidth="1"
oncomplete="uploadComplete();" auto="true">
</p:fileUpload>
This is the (menu) component the navigate again to the xthtml:
<ui:repeat value="#{name}" var="item" >
<div id="menuOP" class="ebene#{item.shifting} #{item.selected ? 'divselected' : 'divnotselected'} #{item.spriteClass}">
<p:commandLink immediate="#{item.immediate}" value="#{item.label}" rendered="#{item.enabled}" action="#{item.navigate}"
styleClass="#{item.selected ? 'selected' : 'notselected'}" oncomplete="#{item.oncomplete}"/>
<h:outputText id="menuNoLinkText" rendered="#{!item.enabled}" styleClass="disabled" value="#{item.label}" />
</div>
</ui:repeat>
I tried to remove the immediate, set the type to "submit", use h:commandLink (without the oncomplete of course) just to see if I can get this running somehow. Does not work.
I also looked at the Primefaces fileupload introduction from balusC, but my problem is not the fileupload, it is the second rendering. There is also a Primefaces forum entry about something similar, but the trick von melloware did not work also.
What I do not understand, by the first click on the menu the rendering works fine and after every click on the menu-commandlink the browser console tells me that the widget is not available.
I found examples with similar problems, but there is most of the time a javascript call of the widget like PF('attachmentUpload').doSomething(), but this is not the case here.
EDIT:
I found out that when I first click on the commandlink the fileupload.js is loaded:
By the second click this is not the case anymore:
I also found a thread with the same problem: <p:layout> and <p:fileUpload> not working on page refresh, but there the only solution seems to be to take the css and js for fileupload and add it manualy to as resource... which is a little creepy...
i'm using primefaces to generated some barcodes (in cod128 format), the primefaces tags works pretty well but the client want the output image (with the codes) at some specific size (1cm of height and 8cm of width), so that's the question:
How i can show a fixed output of the generated barcode at some specific size?
Here is some snippet of my code:
<h:body>
<p:panelGrid columns="2">
<h:outputText value="Code128" />
<p:barcode value="0123456789" type="code128"/>
</p:panelGrid>
</h:body>
i'm using this for reference: http://www.primefaces.org/showcase/ui/multimedia/barcode.xhtml
Thanks :)
The primefaces tag allows you to change the width and height of the component:
<p:barcode value="0123456789" type="code128" width="Xpx;" height="Ypx;"/>
since the size you need is "cm", I would suggest you look for a converter on the web.
You can control and fix the output's size by using the dimensions' attributes of <p:barcode>'s tag, so that you don't need extra CSS/JS improvements :
<p:barcode value="0123456789" type="code128" height="38px" width="302px" />
I am trying to add a file upload component in my application, I used Tomahawk, but it doesn't work with ajax which is essential in my case. So I used RichFaces, I add these jars to my lib folder :
richfaces-core-api-4.3.7.Final.jar
richfaces-core-impl-4.3.7.Final.jar
richfaces-components-api-4.3.7.Final.jar
richfaces-components-ui-4.3.7.Final.jar
then I added this tag to my index.xhtml
<rich:fileUpload fileUploadListener="#{createListBean.listner}"
maxFilesQuantity="1" id="file" immediateUpload="false"
acceptedTypes=".xls,.xlsx,.csv" allowFlash="false">
<a4j:ajax event="uploadcomplete" render=":contact-form:error_mess :contact form:records-form-table" />
</rich:fileUpload>
So my problem is there is an iframe appeared and also I can't find the upload button , and the css looks awful , all I need is an upload file input text and a button to upload with my own css on it. Thanks in advance
I dont know whether the component using iframe or new XMLHttpRequest extension FormData object to implement ajax functionality. But when you add component to your page, it will show a component like in this page Richfaces Showcase. At first upload button is not visible, but when you select some files to upload, it will be visible automatically.
Try considering Primefaces Like this as it is Ajax enabled and very stable except IE 7. you can find many different file uploader like basic, multi, drag n drop, file filter, size limit
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
Good Evening, i want to know how to insert space between JSF components that lies in same <div> without using <h:outputText value=" " /> i used it and in order to insert the desired space that i want i repeated these tag around 50 times! what are the alternative approaches to do that, these is the <div> :
<div
style="width: 100%; font-size: 20px; line-height: 30px; background-color: gray">
<h:outputText value="" />
<h:outputLabel value="Notifications ">
<h:graphicImage
value="/resources/images/lunapic_136698680056094_2.gif" />
</h:outputLabel>
/// insert space here
<h:outputLink id="lnk" value="#">
<h:outputText value="Welcome,Islam"></h:outputText>
</h:outputLink>
<p:tooltip for="lnk">
<p:graphicImage value="/resources/images/sofa.png" />
</p:tooltip>
</div>
This is normally to be achieved using CSS, e.g. via the margin property. CSS works on HTML and JSF is in the context of the current question merely a HTML code generator. You should ignore the JSF part in the question and concentrate on the JSF-generated HTML output in order to achieve the requirement. You can see it by rightclick, View Source in a webbrowser. If the HTML needs some altering, then change the JSF source code in such way that it generates exactly the desired HTML.
E.g.
<h:outputLabel value="Notifications" style="margin-bottom: 100px;">
(please note that using style is a poor practice; CSS should preferably be declared in a .css file which you import via <h:outputStylesheet> and reference via styleClass attribute)
Again, this all has nothing to do with JSF. JSF is in the context of this question merely a HTML code generator. If you're brand new to basic HTML/CSS and thus doesn't exactly understand what JSF is producing, then I strongly recommend to take a JSF-pause and learn those basics first.
Unrelated to the concrete problem, the <h:outputLabel> generates a HTML <label> element, but you don't seem to have any HTML input element associated with it. You're in essence abusing the label element for the wrong purpose. Understanding basic HTML and how to write semantic HTML and knowing what HTML output those JSF components exactly generate should push you far in the right direction. In this particular case, you should likely be using <h:outputText> instead.
To insert spaces between components in the same line, you can use img tag with a 1x1 clear image. (Note: this should be the last resort until other options exhausted, see discussion below)
<img width="100" height="10" src="/path-to/dot_clear.gif" />
e.g.
<img width="100" height="10" src="https://raw.githubusercontent.com/jonathanluo/jsf/master/images/dot_clear.gif" />
Enter desired width; for height any number between 1 to 10 will do.
By default, the unit of width and height is pixel
To get a copy of the dot clear image and save it to local resources from https://raw.githubusercontent.com/jonathanluo/jsf/master/images/dot_clear.gif
Right click on the content area and Save as...