I am using a PrimeFaces dialog. I have just a few elements there. A dataTable and 2 buttons (Ok and Cancel).
But buttons are displayed on bottom, and are visible only when I scroll down the whole table. I want them to be always displayed on bottom, no matter if I am on first or last row.
I search a lot but didn't find anything that works.
Here is snippet from my code:
<f:facet name="{SelectPrijemca}">
<div class="Fs14 Absolute" style="right: 11px; top: 4px">
<p:outputLabel value="#{MAService.selectedPrijemca.nazO}" style="color:white"/>
<p:spacer width="7px"/>
<p:commandButton value="Príjemca" id="selectPrijemcaButton" icon="fa fa-user" rendered="#{MAService.managerAccess}"
onclick="PF('PrijemcaDialogWidget').show();" style="margin-top:2px">
</p:commandButton>
</div>
<p:dialog id="PrijemcaDialog" header="Vybrať príjemcu" widgetVar="PrijemcaDialogWidget" showEffect="fade" hideEffect="fade" height="600" width="1300" position="center" modal="false" resizable="false" >
<h:form id="prijemcaForm">
<p:dataTable
id="prijemcaTable"
scrollable="false"
var="prijemca"
widgetVar="prijemcaTableWidget"
value="#{MAService.prijemcoviaList}"
selectionMode="single"
filteredValue="#{MAService.filteredPrijemcovia}"
emptyMessage="#{messages.localizeEShop('webclient$datatable.tableEmpty')}"
selection="#{MAService.selectedPrijemca}"
rowKey="#{prijemca.id}" >
<p:column width="50"
filterBy="#{prijemca.nazO}" filterMatchMode="contains"
filterStyleClass="narrowEdit"
headerText="#{messages.localizeEShop('webclient$subfiles.lo.LOObjWeb.cols.PrijNaz')}"
sortBy="#{prijemca.nazO}" styleClass="TexAlLeft"
style="white-space: nowrap !important;>
<h:outputText value="#{prijemca.nazO}" styleClass="TexAlLeft" style="color: gray"/>
</p:column>
<p:column width="5"
filterBy="#{prijemca.ici}" filterMatchMode="contains"
filterStyleClass="narrowEdit"
headerText="#{messages.localizeEShop('webclient$subfiles.lo.LOObjWeb.cols.PrijIci')}"
sortBy="#{prijemca.ici}" styleClass="TexAlLeft"
style="white-space: nowrap !important;>
<h:outputText value="#{prijemca.ici}" styleClass="TexAlLeft" style="color: gray"/>
</p:column>
</p:dataTable>
<p:panelGrid columns="2">
<p:commandButton value="OK" icon="fa fa-check" process="prijemcaForm" actionListener="#{MAService.changePrijemca()}" update="contentForm"/>
<p:commandButton value="Zrušiť" icon="fa fa-times" onclick="PF('PrijemcaDialogWidget').hide()" style="background-color:red"/>
</p:panelGrid>
</h:form>
</p:dialog>
</f:facet>
And just one note, I can not make dataTable scrollable, because I use this facet in paginatorTemplate of another dataTable and it somehow makes scrollable all the page where is this table.
I found one partial solution when I wrapped panelGrid where buttons are with:
<div style="position: fixed; width: 65%; top: 70%; left: 16%></div>
But this doesn't fix buttons in dialog but on whole page. So when there is way how to make dialog not movable (draggable) I could go this way.
try to put your datatable in an outputPanel and style it with
<p:outputPanel id="opScrl" style="height:560px;overflow:auto">
<p:dataTable ...>
</p:dataTable>
</p:outputPanel>
Related
I have a selectOneRadio element with layout="custom" inside a dataTable. Below is the xhtml code-
<p:dataTable var="varlist" value="#{testbean.testlist}">
<p:column headerText="Choose Option" width="120">
<p:selectOneRadio id="customRadio" value="#{varlist.varlistValue}"
layout="custom" required="true">
<f:selectItem itemValue="10" />
<f:selectItem itemValue="20" />
</p:selectOneRadio>
<h:panelGrid columns="1">
<h:panelGroup>
<p:radioButton id="opt1" for="customRadio" itemIndex="0" />
<h:outputLabel for="opt1" value="OPTION 1" styleClass="radiolabelOption"/>
</h:panelGroup>
<h:panelGroup>
<p:radioButton id="opt2" for="customRadio" itemIndex="1" />
<h:outputLabel for="opt2" value="OPTION 2" styleClass="radiolabelOption"/>
</h:panelGroup>
</h:panelGrid>
</p:column>
</p:dataTable>
<style type="text/css">
.radiolabelOption {
margin-left: 10px;
}
</style>
So this is how it appears in browser-
As we can see, the outputLabel appears to the bottom with respect to radioButton. But i want that to look centre, w.r.t radioButton as shown below -
I tried below lines of code like
style="display:block; text-align:center" OR
style="margin: 0 auto;"
But none of them produces the desired result.
So How to do it?
Give <h:panelGroup> these styles
.panelGroup{
display: flex;
align-items: center;
}
It's a simple question, is it possible to give style to the component p:fragment?
There aren't any style/styleClass/class attributes for p:fragment specified in the documents (5.0) (although my IDE suggests me to use class based on the library but it doesn't work).
Basically what I want to do is to change the display to:
display: inline;
Because by default the component is rendered as a div with display: block;
I know I could use the id attribute and give it some style, but I don't want this solution because I have multiple fragments and it would be quite ugly.
You can specific your css like my example
<style>
div[id$="-fragment"]{
background-color: red;
}
</style>
<h:form>
<h:panelGrid columns="2" cellpadding="5">
<p:outputLabel for="ignored" value="Required" />
<p:inputText id="ignored" required="true" />
</h:panelGrid>
<p:fragment autoUpdate="true" id="first-fragment">
<h:panelGrid columns="4" cellpadding="5">
<p:outputLabel for="txt" value="Text Value:" />
<p:inputText id="txt" value="#{basicView.text}" />
<p:commandButton value="Submit"/>
<h:outputText value="#{basicView.text}" />
</h:panelGrid>
</p:fragment>
<p:fragment autoUpdate="true" id="second-fragment">
<h:panelGrid columns="4" cellpadding="5">
<p:outputLabel for="txt2" value="Text Value:" />
<p:inputText id="txt2" value="#{basicView.text}" />
<p:commandButton value="Submit"/>
<h:outputText value="#{basicView.text}" />
</h:panelGrid>
</p:fragment>
</h:form>
Hope this help.
Primefaces' fragment component is used to define automatic partially process and update sections whenever ajax request is triggered by a descendant component, it is not a component to display/style content.
If you do not need the automatic processing functionality, use facelet's ui:fragment component for your rendering needs and place its content in a div, which you can style however you want.
Hello
<ui:fragment>
<div style="display: inline;">Hello</div>
</ui:fragment>
Hello
I have an outputLabel which contains a lot of text (about 5000 characters of text), the outputLabel has to add a new line after the line is about 200px, is this possible?
<p:outputLabel value="#{object.body}" />
<p:outputLabel value="#{object.body}" style="width: 200px" />
This code doesn't work:
public String getBodyWithLineBreaks(){
return body.replaceAll("(.{100})", "$1<br/>");
}
It is also not a solution because this method does not look if a word is finished, it just starts a new line at the 100th character.
Some more code:
<p:dataTable id="dataTable" var="object" value="#{notificationOverview.objects}">
<!--Some more columns...-->
<p:rowExpansion>
<h:panelGrid id="display" columns="2" cellpadding="4" style="width:300px;"
styleClass=" ui-widget-content grid">
<f:facet name="header">Notification Information</f:facet>
<h:outputText value="Sender:"/>
<h:outputText value="#{object.sender.username}"/>
<h:outputText value="Time send:"/>
<h:outputText value="#{object.dateSend}">
<f:convertDateTime pattern="yyyy-MM-dd HH:mm:ss"/>
</h:outputText>
<h:outputText value="Title:"/>
<h:outputText value="#{object.title}"/>
</h:panelGrid>
<br/><br/>
<div style='width: 200px;'>
<h:outputText value="#{object.body}" />
</div>
</p:rowExpansion>
</p:dataTable>
The <p:outputLabel> generates a HTML <label> element which is by default an inline element. You can't set the dimensions of an inline element. You can only set it on a block element.
One way would be adding display: block to the style.
<p:outputLabel value="#{object.body}" style="display: block; width: 200px;" />
Additionally, given that this is inside a <p:dataTable> cell, which has by default its CSS white-space property set to nowrap, you need to set it back to normal. This can be set on the same component, but this is preferably to be set on the parent <p:column> itself:
<p:column style="white-space: normal;">
Note: as part of a good practice, you should prefer styleClass over style.
Unrelated to the concrete problem, the HTML <label> element is designed to label an input element which is identified by for attribute. I.e. when you click on it, the associated input element retrieves focus (and a checkbox/radiobutton get selected). When validation is performed, the label is used to identify the input element. However, the fact that you're trying to display 5000 characters inside a label element, which is completely user unfriendly when used as a real label, suggests that you're actually abusing the label for the wrong purpose of displaying "plain text". You should be using <h:outputText> instead. This generates a HTML <span> element which is by default also an inline element. So the above answer applies on that as well:
<h:outputText value="#{object.body}" style="display: block; width: 200px;" />
I have a panel grid with two columns and I want to align the right column text in the center and the left column text to the left.
I try to play with it over and over but still it’s not working
<pe:layoutPane position="south" resizable="false" closable="false" statusbar="true" spacing="0">
<h:panelGrid columns="2" styleClass="left,centered" width="100%">
<h:outputText value="DEV"/>
<h:panelGroup>
<h:outputText value="Developed by "/>
<h:outputLink id="link1" value="mailto:to#mm.com" >
<h:outputText value="text" style="text-decoration:underline"/>
</h:outputLink>
</h:panelGroup>
</p:panelGrid>
</pe:layoutPane>
Here is the css:
.centered {
margin: 0px auto;
text-align: center;
}
.left {
float: left;
}
Any idea how could I archive this layout ??
Thanks
you should better use
<h:panelGrid columns="2" columnClasses="left,centered">
...
</h:panelGrid>
greetings!
I found the solution :)
<center>
<h:outputText value="DEV" style="float: left" styleClass="footer"/>
<h:outputText value="xxxxxxx" styleClass="footer"/>
<h:outputLink id="link1" value="mailto:xxxx#xxxx" styleClass="footer">
<h:outputText value="xxx" style="text-decoration:underline" styleClass="footer"/>
</h:outputLink>
</center>
I see there are some answers posted for this. tried almost all of them with several permutation-combination.. but nothing seems to be working.
components inside panelgris are always middle aligned, instead of top.
tried whatever they said in the below post.
How to control alignment of DataTable inside of a PanelGrid?
Please let me know if there is a remedy.
The <h:panelGrid> renders a HTML <table> element. The vertical alignment of a table cell <td> defaults indeed to middle. You want to make it to be top instead. This is easy with CSS.
<h:panelGrid styleClass="foo">
with
.foo td {
vertical-align: top;
}
If you have a table inside the panelgrid for which you'd like to keep the default table cell vertical alignment of middle, then you need to alter the CSS as follows:
.foo>tbody>tr>td {
vertical-align: top;
}
so that only the panelgrid's own table cells are top aligned.
To learn all about CSS, check http://www.csstutorial.net.
Use the panelGrid's columnClasses attribute to identify a CSS class that includes the vertical-align: top; style:
<h:panelGrid columns="2" columnClasses="topAligned">
...
</h:panelGrid>
and the CSS file:
.topAligned {
vertical-align: top;
}
The contents of the first column in the panelGrid will then be top-aligned within their cells.
Use the styleClass for the panelGrid as in the following example code:
<h:panelGrid columns="2" styleClass="top-aligned-columns" cellpadding="5" style="display:block" cellspacing="5">
<p:outputLabel value="#{resources['IDNumber']}" />
<p:inputText id="txtIDNumber" value="#{applicantBean.personal.idNumber}" />
</h:panelGrid>
Then in the css configure as follows:
.top-aligned-columns td{
vertical-align: top;
}
With this method you will be able to not only top-align the rows but you can also apply the same styleClass to other panelGrids within the encompassing panelGrid.
For example:
<h:panelGrid columns="3" styleClass="top-aligned-columns" cellpadding="5" style="display:block" cellspacing="5">
<p:panel id="pnlApplicant" header="#{resources['ApplicantHeader']}" styleClass="no-border">
<h:panelGrid columns="2" cellpadding="5" style="display:block" cellspacing="5" styleClass="top-aligned-columns">
<p:outputLabel value="#{resources['IDNumber']}" />
<p:inputText id="txtIDNumber" value="#{applicantBean.personal.idNumber}" >
<p:ajax event="change" process="#this" update="tvQuickScore"/>
</p:inputText>
<p:outputLabel value="#{resources['Name']}" />
<p:inputText id="txtFirstname" value="#{applicantBean.personal.firstName}" />
<p:outputLabel value="#{resources['Surname']}" />
<p:inputText id="txtSurname" value="#{applicantBean.personal.lastName}" />
</h:panelGrid>
</p:panel>
</h:panelGrid>
</p:panel>