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
Related
I have a primefaces tabview with a variable count of dynamic tabs on the left side. Each tab may contain elements which make a tab varies from height.
When the number of tabs is large, and the content of the selected tab is short, the tab titles are beyond the confines of the tabview. The whole page can not be scrolled to access lower tabs. So in such cases, there is no way to select the bottom tabs that are down below the bottom of the page.
Is there any way to make the tabview enclose all the tabs?
<p:tabView orientation="left" style="width: 100%; padding: 5px;" value="#{clientEncounterComponentFormController.findClientEncounterComponentFormOfAFormset(clientEncounterComponentFormSetController.selected)}" var="f">
<p:tab title="#{f.name}" >
<div style="#{f.generatedCss}" >
<ez:clinicForms form="#{f}" ></ez:clinicForms>
</div>
</p:tab>
</p:tabView>
I don't see your code, so thats hard for me to answer you correctly.
1) TabView component is not for a big content with long text, I would like to recommend you SelectOneMenu or MultiSelectListbox, thats really better for working with a lot of options.
2) Also you can change size of tabs dynamically by css, you are able to set styles by conditions like:
<p:tabview value="#{yourBean.listOfObjects}" style="height: 5vw;" rendered="yourBean.isThereBigContent()">
</p:tabview>
<p:tabview value="#{yourBean.listOfObjects}" style="height: 10vw;" rendered="!yourBean.isThereBigContent()">
</p:tabview>
Bean:
public boolean isThereBigContent() {
return this.listOfObjects.size() > 8;
}
In my webapp I declare a Primeface's dataList inside a Primeface's column which in turn is located inside a PF dataTable like this:
<p:dataTable id="equip_table"
value="#{virtualBean.listEquip}"
var="item"
paginator="true"
rows="100"
rowsPerPageTemplate="100,50,10,5" >
...
<p:column
headerText="Operador | Equipamentos reais"
style="padding: 5px; >
<p:dataList
style="border: none;"
value="#{item.equipReals}"
var="equips" >
<h:outputText value="#{equips.operator}" />
<h:outputText value=" | " />
<h:outputText value="#{equips.equip.nome}" />
</p:dataList >
</p:column>
The visual result is as in the image below: the dataList is correctly put inside the column, but with an undesired border around. Not only that, it creates a distortion of (around) 1 pixel in the table's grid:
I'ld like both this undesired errors removed: no border around the data displayed and no distortion in the table. I imagined this could be done by changing the style as above, style="border: none;", but that didn't work just as putting outline to none, changing the border/outline color to white, etc.. The commands are leading to no effect. I tried to do similar coding inside the column's style call, but that affect the entire column's behaviour which is undesired. Surfing on SO I found some possible solutions involving more complex .css programming which I wasn't able to adapt to my situation. Without such solution, I wasn't even able to handle the table cells misalignment.
So how do I remove this content's border? And what can be done about the table misalignment?
Try putting styleClass="noBorders" on the p:dataList . And the on your CSS file or page style tag:
.noBorders *{
border: none !important;
}
If the distortion persist you might as well try to remove padding and margin from datalist.
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?
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/
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.