How to position a commandButton on top of tabview header ?
I tried out this but failed to position the commandButton on top of tabview. Instead the commandButton gets hidden by the tabview
<h:commandButton value="View all" style=" float:right; z-index: 1000;" />
<p:tabView style=" z-index: 5;" >
<p:tab ...>
</p:tab>
<p:tab ...>
</p:tab>
</p:tabView>
If you add position:absolute; to your <h:commandButton> style it will be on top of the <p:tabView>.
Related
I have a panelGrid with two columns - each one of them with a panel. Both panels have dataTables and are side by side.
<h:panelGrid id="png31" columns="2">
<p:panel id="pnlCab" header="Cabecera">
<p:commandButton value="Nueva actividad" type="button" id="actiNue" onclick="PF('wdlgAgregar').show()"/>
<br /> <br />
<p:dataTable id="dataCabecera" value="#{cargaHorariaController.listaActivDoc}">
<!-- Elements -->
</p:dataTable>
</p:panel>
<p:panel id="pnlDet" header="Detalle">
<p:commandButton value="Nueva subactividad" type="button" id="subactiNue" onclick="PF('wdlgAgregarS').show()">
<p:ajax update="cmbSubNue" listener="#{cargaHorariaController.cargarSubactividades()}" />
</p:commandButton>
<br /> <br />
<p:dataTable id="dataDetalle" value="#{cargaHorariaController.listaSubactividad}">
<!-- Elements -->
</p:dataTable>
</p:panel>
When the datatables are empty, both panels are at the top, but when one of them displays records, the panel with the empty dataTable aligns vertically to the middle of the panel with the filled dataTable.
What can I do so both panels are always at the top, even with filled dataTables?
Try:
<style type="text/css">
.my-style td{
vertical-align: text-top !important;
}
</style>
<h:panelGrid id="png31" columns="2" columnClasses="width: 40%, width: 60%"
styleClass="my-style" >
<p:panel>
........
</p:panel>
.......
.......
.......
</h:panelGrid>
Add CSS classes:
.col1 {
width: 40%;
vertical-align: top;
}
.col2 {
width: 60%;
vertical-align: top;
}
and change
<h:panelGrid id="png31" columns="2" columnClasses="col1, col2">
I need to include help icon or button inside primefaces tabView header beside the tabs
<p:tabView >
<p:tab title="title1">
<p:tab title="title2">
<p:tab title="title3">
<span class="ui-icon-help" style="position: absolute; right: 6px;" id="desc" />
</p:tabView>
I am developing a project using primefaces.
In that, I used one p:panel(in user.xhtml page) inside the p:dialog and I set showHeader="false" to the p:dialog.
For that, I need to drag the p:dialog when I click and drag on the p:panel, which is included inside the p:dialog.
Sample Code:
<p:dialog showHeader="false">
<ui:include src="${model.dynamicPage}"/>
</p:dialog>
user.xhtml
<h:form id="userForm">
<p:panel header="UserPanel">
.......
</p:panel>
</h:form>
Any Idea?
Use the draggable component on a panel instead of a dialog
<p:panel id="pnl" header="UserPanel">
<ui:include src="${model.dynamicPage}"/>
</p:panel>
<p:draggable for="pnl" />
and define the panel dimensions with some css:
.ui-panel {
margin: 15px;
height: 200px;
width: 300px;
}
Edit: if there are several components in your model.dynamicPage facelet but you want the panel to be the only allowed to handle the dragging of the whole container, add a css class to it and restrict the draggable component handling with this class:
eg.
<p:panel id="pnl" showHeader="false">
<ui:include src="${model.dynamicPage}"/>
</p:panel>
<p:draggable for="pnl" handle=".my-handle-classname" />
and
<h:form id="userForm">
<p:panel header="UserPanel" styleClass="my-handle-classname">
.......
</p:panel>
</h:form>
I try to add tabs dynamically using ui:include, but I can not get the good behavior!
If I look at the HTML response, the content is there, but does not appear in the tab.
If i try to open a 2nd tab with an other content the html result contain the same content as the 1st tab.
A tab is added with the following command:
<p:commandLink id="appC1" update=":tabview" actionListener="#{tview.sideBarAction}"
value="App 1">
<f:param id="c1ParamId" name="pageViewId" value="App1" />
</p:commandLink>
and the tabview:
<p:tabView id="tabview" value="#{tview.tabs}" var="tab">
<p:tab title="#{tab.title}" closable="true">
<p:panel id="myPanel">
<ui:include src="#{tab.content}"/>
</p:panel>
</p:tab>
</p:tabView>
I tried to do this programmatically, but I have not had best results!
Try with c:forEach like that:
<p:tabView id="tabPanel" activeIndex="#{tabView.activeIndex}"
style="width: 100%; height: 100% !important;">
<p:ajax event="tabClose" listener="#{tabView.onTabClose}"/>
<p:ajax event="tabChange" listener="#{tabView.onTabChange}"/>
<c:forEach items="#{tabView.tabs}" var="tab">
<p:tab titletip="#{tab.id}" title="#{tab.label}" closable="true">
<ui:include src="#{tab.url}"/>
</p:tab>
</c:forEach>
</p:tabView>
Good luck! :)
I have a page named Tabview1 which composed of tabview.
Tabview1.xhtml:
<p:tabView>
<p:tab title="1">
<ui:include src="/Apanel.xhtml"/>
</p:tab>
<p:tab title="2">
</p:tab>
<p:tab title="3">
</p:tab>
</p:tabView>
I want to forward to the page Tabview2.xhtml if click on the tab named 2.
Tabview2.xhtml:
<p:tabView>
<p:tab title="1">
</p:tab>
<p:tab title="2">
<ui:include src="/Bpanel.xhtml"/>
</p:tab>
<p:tab title="3">
</p:tab>
</p:tabView>
Who can help me ?
Tabview creates a list with one element for each tab. Every <li> contains an <a href="#j_idtXXX">. Create a script on your site that changes these links to Tabview2.xhtml. For example if you set the id of your tabview to "tabview":
jQuery("#tabview ul a").first().attr("href", /MyPortal/Tabview2.jsf?tab=0);
This would cause the first tab to lead to the new page, and select the right tab on that page if you have configured a viewparam and have activeIndex="#{controllerClass.activeIndex}" set on the tabview.
I'm in a rush now, so I only had time to write a short example, but if you have some skill with javascript, it should not be too hard.
<p:tabView>
<p:tab title="Title1">
<p:panel>
<ui:include src="tabView1.xhtml" />
</p:panel>
</p:tab>
<p:tab title="Title 2">
<p:panel>
<ui:include src="tabView2.xhtml" />
</p:panel>
</p:tab>
</p:tabView>