Hello I have the following codeblock
<h:commandLink style="padding: 0px 2px 0px 2px; float:right;" onclick="pleaseWait.show()" action="#{bean.export()}">
<p:graphicImage value="/resources/images/html.png" alt="to html" />
</h:commandLink>
I am trying to close the pleaseWait dialog after action finished.
Any help?
Related
Click on the following link,
TextBox with search Image on Left
i want the text box exactly the sameway with watermark in it.
I tried multiple ways,but nothing worked
Content from my .xhtml file
<h:inputText id="bundelId" styleClass="icon2" value="">
<p:watermark value="Enter Bundel Id" for="bundelId" styleClass="icon2"></p:watermark>
</h:inputText>
My css contains following classes
.icon2 {
background: url(search.gif) no-repeat 4px 4px;
padding:4px 4px 2px 20px;
height:10px;
margin: 0;
}
.icon3 {
float: right;
background: url(search.gif) no-repeat left bottom;
border: 0;
cursor: pointer;
margin: 0;
}
I have tried with both jsf and primefaces tags together with css classes mentioned above.
Can someone help?
if you are using FontAwesome you could try:
<p:watermark value=" Enter Bundel Id" for="bundelId" />
<h:inputText id="bundelId" value="" style="font-family:Arial, FontAwesome">
being the unicode for icon-search.
https://fortawesome.github.io/Font-Awesome/cheatsheet/
I would like to show confirmation dialog on select/unselect checkbox in primefaces. I have tried to
<p:selectBooleanCheckBox value="#{myBean.checkBoxValue}">
<p:confirm message="Are you sure?"/>
</p:selectBoooleanCheckBox>
but it doesn't work since selectBooleanCheckBox is not Confirmable. Is there any workaround to solve this problem?
One way is to create your own confirmDialog like
<p:confirmDialog widgetVar="myOwnConfirmDialog" message="Confirm ?">
<p:commandButton value = "Yes"
action = "#{myBean.checkConfirmedAction}"
oncomplete = "PF('myOwnConfirmDialog').hide()"/>
<p:commandButton value = "No"
action = "#{myBean.checkCancelledAction}"
oncomplete = "PF('checkConfirmwdgt').toggle(); PF('myOwnConfirmDialog').hide()"/>
</p:confirmDialog>
and then use onchange event to open the confirmDialog:
<p:selectBooleanCheckbox value="#{myBean.checkBoxValue}"
onchange="PF('myOwnConfirmDialog').show()"
widgetVar="checkConfirmwdgt">
</p:selectBooleanCheckbox>
EDIT:
I made a typo and a mistake on my answer. The typo was actually using <p:confirm> inside <p:selectBooleanCheckbox> (you are right, selectBooleanCheckbox isnt confirmable.)
The mistake was that <p:selectBooleanCheckbox> doesn't fires onclick, but only onblur, onchange and onfocus. Using onchange will work.
I solved it a different way - didn´t want to wait till PrimeFaces implements the Interface.
I´m displaying two "commandButton"s - only one of them is rendered dependent on state. They are enclosed by a form - or you can use a named panel ("selectProductUsageForm" in my example) which is updated via AJAX. The first one is representing the active (toggled) state - the second the untoggled state.
The solution was to mimic the display behaviour - which Primefaces encapsulates in the CSS-class "ui-state-active" (theme.css). I copied the contents of the CSS-class to my own CSS-class "man-ui-state-active" and assigned it to the first button.
<h:form id="selectProductUsageForm"
rendered="#{productManager.mayEditSelected}">
<span class="productGroupUsageBtnContainer">
<p:commandButton
value="#{msg['product.inUseByGroup']} (#{login.currentUser.group.name})" styleClass="man-ui-state-active"
icon="ui-icon-check"
action="#{productManager.toggleCurrentProductGroupUsage}"
rendered="#{productManager.currentProductGroupUsage}" update="selectProductUsageForm">
<p:confirm message="Are you sure?"/>
</p:commandButton>
<p:commandButton value="#{msg['product.notInUseByGroup']} (#{login.currentUser.group.name})"
icon="ui-icon-close"
action="#{productManager.toggleCurrentProductGroupUsage}"
rendered="#{not productManager.currentProductGroupUsage}" update="selectProductUsageForm">
<p:confirm message="Are you sure?"/>
</p:commandButton>
</span>
</h:form>
CSS
.ui-button.man-ui-state-active {
background-color: #e6e6e6;
background-color: #d9d9d9 \9;
background-image: none;
outline: 0;
-webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}
You want to show a notification(info, alert,...) on a change of the checkbox. Do this :
<p:selectBooleanCheckBox value="#{myBean.checkBoxValue}"
onchange="if(!confirm('Your warning or information message here!!!'))
return false">
<p:ajax listener="#{myBean.yourMethodHere()}"
update="theComponentYouWantToUpdate" />
</p:selectBoooleanCheckBox>
(How) is it possible to dynamically resize primefaces galleria depending on the size of the sourrounding div-container? The galleria should allways fill the entire surrounding div-container.
Would be jscript/jquery the right approach?
http://www.primefaces.org/showcase-labs/ui/galleria.jsf
Try make the .ui-galleria width attribute to 100%. Make sure that css class is relative.
In order to make both the gallery and the images inside fill the container, add in the css:
.ui-panel-images {
width: 100%;
height: 100%;
}
.ui-galleria-panel {
width: 100%;
height: 100%;
}
Also, add the following to the p-galleria element:
panelWidth="auto"
I'm trying something similar, and I also came to a problem.
I am using the p:galleria element like these:
<h:form id="galleriaForm" style="border: 2px solid blueviolet; min-height: 800px">
<p:panelGrid columns="1" layout="grid" style="border: 2px solid aqua; min-height: 100%">
<p:row style="display: inline-block; min-height: 800px;border: 2px solid green; min-width: 100%">
<p:column style="display: inline-block; min-height: 100%; min-width: 100%;border: 2px solid red">
<p:outputLabel value="Überschrift" style="display: block;"/>
<p:galleria value="#{ImageManager.layoutBauenBilderlsite}"
id="galleriaID"
var="image"
showCaption="false"
transitionInterval="9000"
effectSpeed="1500"
style="display: inline-block; min-width: 100%"
effect="drop"
panelHeight="">
<p:graphicImage url="resources/images/#{image}"
style="height: 1040px; border:1px dotted lightgray; margin-left: 30%"/>
</p:galleria>
</p:column>
</p:row>
</p:panelGrid>
</h:form>
To change the panelHeight attribute the h:body uses onload to call a js function:
function setGalleriaHeight(){
var h = window.innerHeight;
document.getElementById("galleriaForm:galleriaID").setAttribute("panelHeight", String(h));
}
The panelHeight attribute is set correctly, as I can see with my Browser, but the Element does not change.
To make sure that the attribute is correct I added it in my source code and it worked fine.
I also tried to set the the size as style="height: h" but then only the loaded image "p:graphicImage does not resize with.
Maybe there is someone to know why it does not change.
I'm trying to show only the button add and the uploaded picture below the button, but it doesn't matter what I do in my CSS, the table generated by richfaces is always the same:
This is my form using richfaces:
<ui:define name="content">
<h:form>
<h:panelGrid>
<rich:fileUpload fileUploadListener="#{fileUploadBean.listener}" id="upload" acceptedTypes="jpg, gif, png, bmp" ontyperejected="alert('Just JPG, GIF, PNG and BMP are allowed');" maxFilesQuantity="12" immediateUpload="true" >
<a4j:ajax event="uploadcomplete" execute="#none" render="info" />
</rich:fileUpload>
<h:panelGroup id="info">
<h:outputText value="Add picture" rendered="#{fileUploadBean.size==0}" />
<rich:dataGrid columns="4" value="#{fileUploadBean.files}" var="file" rowKeyVar="row">
<a4j:mediaOutput element="img" mimeType="image/jpeg" createContent="#{fileUploadBean.paint}" value="#{row}" style="width:100px; height:100px;" cacheable="false" />
</rich:dataGrid>
<br />
<a4j:commandButton action="#{fileUploadBean.clearUploadData}" render="info, upload" value="Clear Uploaded Data" rendered="#{fileUploadBean.size>0}" />
</h:panelGroup>
</h:panelGrid>
</h:form>
</ui:define>
And this is how is generated :
I want something more simple 'cause in another moment I will some jQuery slider plugin. But I can't disappear with this table generated by richfaces.
And yes skins are disable in my richfaces configuration:
update
Following the suggestion my CSS look like this now:
<style>
div div.rf-fu { border: 0px; width: 85px; }
div div.rf-fu-hdr { border: 0px; }
span span.rf-fu-btn-clr { border: 0px; }
span.rf-fu-btns-lft{ width: 85px; }
span.rf-fu-btns-rgh{ display: none; }
div div.rf-fu-lst { display:none; }
</style>
And now my add.. file button looks like:
These post was very useful too:
Should I use 'border: none' or 'border: 0'?
Inner div has borders - how to override with a class on an outer div?
You can use Adrian's answer to override richfaces css however you don't need to use !important to override richfaces css. Just use selector specificity to override the css applied by richfaces.
For Instance in case where you are using important, apply the css as:
div div.rf-fu-lst { display:none } and it will work for you.
I'm currently doing this for my project. You have to override the richfaces css in your stylesheet like this:
.rf-fu, .rf-fu-hdr {
float: left;
width: auto;
border: none;
background: none;
padding: 0;
margin: 0;
}
.rf-fu-btn-cnt-add {
paddin-left: 0;
cursor: pointer;
}
.rf-fu-btn-add {
margin: 0;
}
.rf-fu-btns-rgh, .rf-fu-lst {
display: none;
}
.rf-fu-btns-lft {
width: 100%;
}
How do I align the content in the columns created by panelGrid component to the top ?
I tried with no success, the following code
<h:panelGrid columns="2" style="vertical-align:top; " >
<p:tabView style="margin:0px 0px 50px 0px; width: 450px; padding-top: 0px;vertical-align:top" ></p:tabView>
<p:menubar autoSubmenuDisplay="true" style="width: 300px; vertical-align:top" ></p:menubar>
</h:panelGrid>
But the 2 columns created hereby still remain vertically middle aligned.
Based on this answer, you can do like this (I like this approach the most)
<h:panelGrid columnClasses="className">
.className {
vertical-align: top;
}
for me it works if you do it like that:
<h:panelGrid columns="6" cellspacing="4" cellpadding="4" styleClass="panelColumns">
</h:panelGrid>
and create a css file which contains:
.panelColumns td {
vertical-align: top;
}
just as additional hint .. so you do not have to search to long :)