Primefaces tabview does not include all tabs - primefaces

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;
}

Related

How to remove PrimeFaces dataList's border inside a Primeface's column?

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.

PrimeFaces DialogFramework top positioning

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

Title rendering issue

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?

How to open overlay menu from oncomplete of p:commandButton with Primefaces?

I'm using Primefaces 3.3.1 and have question.
I have p:commandButton inside p:column of p:dataTable. I can show overlay menu when button is clicked with xhtml shown below.
<p:commandButton id="btnID" icon="ui-icon-circle-triangle-s" style="height: 16px;">
<f:setPropertyActionListener value="#{searchItem}" target="#{bean.selectedSearchItem}" />
</p:commandButton>
<p:slideMenu overlay="true" trigger="btnID" my="left top" at="left bottom"
model="#{bean.menuModel}"/>
In this case, bean.menuModel can return menu data instantly. But I have another case also which pre-procsessing is required to make menu data ready. So I have this one too.
<p:commandButton ajax="true" id="historyButton" action="#{bean.getHistory()}"
icon="ui-icon-note" style="height: 16px;"
onstart="workingDialog.show();"
oncomplete="workingDialog.hide(); historyMenu.show();">
<f:setPropertyActionListener value="#{searchItem}" target="#{bean.selectedSearchItem}" />
</p:commandButton>
<p:menu overlay="true" widgetVar="historyMenu" my="left top" at="left bottom"
model="#{searchBean.menuModel}"/>
What I meant is, when button is clicked, it calls bean.getHistory() which starts loading menu data for that row, and show modal dialog with circling icon. When loading is finished, dialog will go away and overlay menu will be shown. What I can't do is a last part of this scenario. Above code fires exception.
java.lang.NullPointerException
javax.faces.component.UIComponentBase.findComponent(UIComponentBase.java:561)
org.primefaces.component.menu.BaseMenuRenderer.encodeOverlayConfig(BaseMenuRenderer.java:138)
org.primefaces.component.menu.MenuRenderer.encodeScript(MenuRenderer.java:45)
org.primefaces.component.menu.BaseMenuRenderer.encodeEnd(BaseMenuRenderer.java:39)
javax.faces.component.UIComponentBase.encodeEnd(UIComponentBase.java:875)
javax.faces.component.UIComponent.encodeAll(UIComponent.java:1763)
javax.faces.component.UIComponent.encodeAll(UIComponent.java:1759)
Code shown below works fine, without menu related code.
<p:commandButton ajax="true" id="historyButton" action="#{searchBean.getHistory()}"
icon="ui-icon-note" style="height: 16px;"
onstart="workingDialog.show();"
oncomplete="workingDialog.hide();">
<f:setPropertyActionListener value="#{searchItem}" target="#{bean.selectedSearchItem}" />
</p:commandButton>
I guess this is easy question for experts. How can I open overlay menu from oncomplete?
Thanks in advance.
I could not find a solution for this issue but I came up with conclusion that what I wanted to do is not a good idea with the environment I'm working on.
First, I noticed that menu gets data from bean when row of data table is populated, not when menu is shown. And there is no lazy loading mechanism for menu. So button click -> get data for menu from server -> open menu cannot be done as I expected (at least it seems to me).
Second, I noticed putting menu in DataTable (under TabView in my case) causes very strange problem. When I update DataTable, some ajax related function stops working. I can't explain this problem to make you understand or believe, but app I'm working on is having this problem.
So, I gave up putting menu in DataTable in my app. Thank you for your attention.
I accept this answer not to lower my already LOW accept rate.

How to make skinned Title Bar in PrimeFaces

On PrimeFaces showcase page there is a simple title bar which fits in the actual theme. I mean the "Welcome to PrimeFaces showcase" text on this page: http://www.primefaces.org/showcase/ui/home.jsf
This is not a button nor any kind of responsive control, just a themed textbox or title bar.
I've searched a lot but I was not able to find a simple <p: > component which can generate this kind of result.
Can anybody help me, how to make such an element in PrimeFaces?
Here you can find the xhtml code for the welcome page - home.xhtml(home.jsf) : http://code.google.com/p/primefaces/source/browse/examples/trunk/showcase/src/main/webapp/ui/home.xhtml?r=5567
As you can see there, the 'title bar' is just a simple <h1> tag with some css:
<h1 class="title ui-widget-header ui-corner-all">Welcome to PrimeFaces ShowCase</h1>
There you can find the entire primefaces website/project, and the CSS files as well, but it's better to implement your CSS...
You can use <p:toolbar> tag for it.
Though its main usage lies in grouping together several content, But it does give the effect of a Title Bar you are looking for.
<p:toolbar>
<p:toolbarGroup align="left">
<p:outputLabel value="Welcome!!" />
</p:toolbarGroup>
</p:toolbar>
You can surround the <p:outputLabel> tag with other tags like <h1>, <p> with CSS to give more effect.