So when you create a dialog with primefaces it disables all of the page in the background. Is there a good way to do that without the dialog box?
Basically I want to disable the whole page during a specific ajax request.
Yup its called BlockUI ,
BlockUI
<p:panel id="pnl" header="My Panel">
//content
<p:commandButton id="saveBtn" value="Save" />
</p:panel>
<p:blockUI block="pnl" trigger="saveBtn" />
also , take a look at the user guide at the BlockUI section...
You could create a div that was the size of the HTML give it a z-index very high, after that you hide or show this div when you want to block or show the page.
Like this
<html>
<div class="blocker"></div>
<div class="page">
Your content here
<button id="btn">teste</button>
</div>
<html>
.page{z-index: 900}
.blocker{z-index:1000;height:100%;width:100%;background: gray; opacity:0.7; position: absolute;}
Check it out here:
http://jsfiddle.net/6nDtu/31/
Related
Is there a way to update the preRenderView components with ajax?
Some example:
<html>
<f:event type="preRenderView" listener="#{bean1.load}" />
<f:event type="preRenderView" listener="#{bean2.load}" />
<body>
<div jsf:rendered="#{bean1.enabled}" >
// some code here
</div>
</div jsf:rendered="#{bean2.enabled}" >
// some code here
</div>
</body>
</html>
In this example, i want the preRenderView of case 1 only be fired if bean1 is enabled. Adding a check in java code is not a good idea, because the session will be invoked everytime and i have a way more complex thing than the simple sample above.
Can i wrap the f:events in any component? Add a rendered attribute to the component and update them with an ajax call?
As far as i know, it's not allowed to add any other components as head or body as children of the html tag.
Is it allowed to pack the preRenderView inside the body element and wrap it with a simple jsf:div?
Use the preRenderComponent event instead and put those f:events inside the divs.
I'm not sure if it will play nicely with this kind of JSF binding though. You may have to replace those divs with h:panelGroup layout="block" (which renders simple divs as well).
I have a SharePoint team site and I made some changes in master page as below:
Moved top menu links and search box below page heading
In place of top links I placed an image called image1 and in place of search box I placed another image called image2
Replacing SharePoint logo with my own logo and increasing its size
I did all this using DIV/CSS. Now I am no designer, not even close. So I had to do a lot of trial and error before every thing looked ok except this one issue which now I am facing and i.e. when you click on "new document" link which opens a dialog box where you can upload document, that window is also showing those logos (which I mentioned in point 2 above)
How can I get rid of that? I was thinking that if somehow I can find out if the dialog is open then I can hide those images using CSS/Jquery?
Here's partial code to given you and understanding where I have wrote code. My divs are named "mydiv" and "mydiv2" while rest of the code is SharePoint's default:
<div id="WebPartAdderUpdatePanelContainer">
<asp:UpdatePanel
ID="WebPartAdderUpdatePanel"
UpdateMode="Conditional"
ChildrenAsTriggers="false"
runat="server">
<ContentTemplate>
<WebPartPages:WebPartAdder ID="WebPartAdder" runat="server" />
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="WebPartAdder" />
</Triggers>
</asp:UpdatePanel>
</div>
</SharePoint:AjaxDelta>
</div>
</div>
<div id="s4-workspace" class="ms-core-overlay">
<div id="mydiv" style="float:left;border:thin;border-style:none;width:210px;position:absolute; padding-top:20px;padding-bottom:0px;padding-left:200px;z-index:1;">
<img src="/images/image1.jpg" width="65%" height="65%"></div>
<div id="mydiv2" style="border: thin none currentColor; width: 250px; right:600px;position:absolute; padding-top:20px; padding-bottom:10px;float: right;z-index:1;">
<img src="/images/image2.jpg" width="800" height="56">
</div>
<div id="s4-bodyContainer">
<div id="s4-titlerow"
class="ms-dialogHidden s4-titlerowhidetitle">
<div id="titleAreaBox"
class="ms-noList ms-table ms-core-tableNoSpace">
<div id="titleAreaRow"
class="ms-tableRow">
Fixed by using CSS class ms-dialogHidden as mentioned here:
https://sharepoint.stackexchange.com/questions/200195/new-document-dialog-showing-master-page-header-images/200197#200197
I use PrimeFaces 6 and want to position the dialog on top:
options.put("position", "top");
However this does not work. Is there any way to center the dialog on top?
I am quite desperate now
As per Primefaces User Guide 6.0
Position
By default dialog is positioned at center of the viewport and position option is used to change the
location of the dialog. Possible values are;
• Single string value like ‘center’, ‘left’, ‘right’, ‘top’, ‘bottom’ representing the position within
viewport.
• Comma separated x and y coordinate values like 200, 500
• Comma separated position values like ‘top’,‘right’. (Use single quotes when using a combination)
Some examples are described below;
<p:dialog position="top" ...>
<p:dialog position="left,top" ...>
<p:dialog position="200,50" ...>
I know, you would like to set position to primefaces external dialog(dialog framework).
You cannot style or css to dialog because which is wrap by ifram.
But, it is OK to apply css to generated div. This div id is formId + commendLinkId or commendButtonId + _dlg
Example
<h:form id="myForm">
<p:commandButton id="myDialgoBtm" value="Select" action="...." immediate="true">
<p:ajax ..../>
</p:commandButton>
</h:form>
Client/Brower Source
<div id="myForm:myDialogBtn_dlg" ..>
<div ....>
//this is bor title bar of dialog
</div>
<div ....>
//this is bor content of dialog
<ifarm ....>
//here your external dialog page
</ifarm>
</div>
</div>
if so, the id of div will be myForm:myDialogBtn_dlg. You can inspect in browser.
Example CSS for your dialog
#myForm\:myDialogBtn_dlg {
top: 0px!important
}
I don't think, it will be better solution, Currently, I solve this issue by above way.
I was finding the solution, but the only way that I found it was this:
.ui-dialog {
top: 100px !important;
}
I put this code below of
I've implemented a p:commandButton to update the contents of a table when it is clicked. I think this is working (although It isn't properly tested) but the more immediate issue is as follows.
Bug
Before the request, the title bar looks like this:
And after I hit the refresh button on the right, the page re-renders as follows:
Attempts to solve
The following is the current code for my p:commandButton:
<p>
<p:commandButton oncomplete="eventFeedsDialog.show()" update=":eventFeedsForm" id="feedsRefresh" icon="ui-icon-refresh" title="Refresh page" style="height:40px; width:40px; float:right;">
<f:setPropertyActionListener value="#{true}" target="#{searchBean.refresh}"/>
</p:commandButton>
</p>
The eventFeedsDialog is the p:dialog element that this button is wrapped in, which is further wrapped in a h:form element. Here is the declaration of the eventFeedsDialog element:
<p:dialog id="eventFeedsDialog" header="Feeds" widgetVar="eventFeedsDialog" resizable="false" width="1000"
styleClass="dialog">
I've tried changing the oncomplete attribute to point at the h:form instead of the dialog, but it appears not to have worked. I thought up a hack, whereby I append a mountain of spaces in the header attribute, but that is horrendously ugly.
I've not found anything on google like this, so I was wondering if you guys have any ideas?
This question was previously posted on Primefaces forum where I din't receive any answer.
I'm trying Primefaces 3.1 because I would need the overlay panel functionality.
Unfortunately in my Internet explorer 8 (ie8) the following very simple overlay panel is never displayed, while it works quite fine on Firefox 5.x.
Some points in the html code which seem directly related to the Ie8 problem are the following:
- the page doesn't need a vertical scrollabar (if the page has one the overlay panel is shown)
- the overlayPanel height is fixed.
<h:body>
<div style="height: 300px"></div>
<h:form>
<p:commandLink id="showAllUserList" value="Utenti online" />
<p:overlayPanel for="showAllUserList" my="right bottom" at="right top" dynamic="true"
style="width: 300px; height: 500px; border: 1px solid red; overflow-y: scroll" >
He who rules the skies rules the ground
<br/>
Monti kicks ass
</p:overlayPanel>
</h:form>
</h:body>
If I don't find a workaround soon I would have to implement something myself.
Thanks
Filippo
Put the following Javascript code before closing the h:body Tag.
<script type="text/javascript">
if ( $.browser.msie) {
if(parseInt($.browser.version, 10) === 8){
var overlayPan = $("div.ui-overlaypanel");
$(overlayPan).css('position','fixed');
}
}
</script>
You might try setting appendToBody to true for the overlay panel. This can help in some situations, though to be honest I think your page is simple enough that it wouldn't make a difference.
Check your styles for overflow:hidden (also of the child elements of .ui-overlaypanel), play around giving them overflow:visible - in combination with a fixed size (as you already have) I was able to solve the problem.