I'm using <p:commandLink> inside <p:panelGrid> as follows.
<p:panelGrid columns="1" style="width: 50%;">
<p:commandLink>
<h:outputText styleClass="ui-icon ui-icon-search"/>
</p:commandLink>
<p:commandLink>
<h:outputText styleClass="ui-icon ui-icon-search"/>
</p:commandLink>
<p:commandLink>
<h:outputText styleClass="ui-icon ui-icon-search"/>
</p:commandLink>
</p:panelGrid>
In this case, the area surrounded by columns inside <p:panelGrid> as shown in the following picture is clickable in its entirely
but it is not the case of Internet Explorer (8) in which case, the only clickable item is the link icon as indicated by the styleClass attribute of <h:outputText>.
Is there a way to make entire columns of <p:panelGrid> clickable on Internet Explorer?
In order to let an element span the entire table cell, the element in question needs to have CSS display property set to block. In this particular case, this is already set via .ui-icon class on the <span> element as represented by <h:outputText>. However, the .ui-icon in turn defines a background image. IE incorrectly attaches the background image to the parent element instead of the current element. You need to set the parent element to display:block as well, which is in your case the HTML element as represented by <p:commandLink>.
E.g. this should do:
<p:panelGrid columns="1" styleClass="search">
<p:commandLink>
<h:outputText styleClass="ui-icon ui-icon-search"/>
</p:commandLink>
<p:commandLink>
<h:outputText styleClass="ui-icon ui-icon-search"/>
</p:commandLink>
<p:commandLink>
<h:outputText styleClass="ui-icon ui-icon-search"/>
</p:commandLink>
</p:panelGrid>
With
table.search {
width: 50%;
}
table.search a {
display: block;
}
This shouldn't affect the behavior in real browsers.
Related
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>
This is my page structure:
<p:panelGrid>
<p:row>
<p:column>
<p:panelGrid id="innerPg_1">
</p:column>
<p:column>
<p:panelGrid id="innerPg_2">
</p:column>
</p:row>
</p:panelGrid>
I would like to override the padding attribute on the ui-panelgrid-cell class, only for the panelGrid with id="innerPg_1", by making my own css rule.
How can I do that?
Tried with the following rule:
#innerPg_1 .ui-panelgrid-cell {
padding: 1px 1px !important;
}
but it doesn't work. Shouldn't it be a wrong rule?
The produced html part is:
<td role="gridcell" class="ui-panelgrid-cell">
<tabled id="formId:innerPg_1"class="ui-panelgrid ui-widget role="grid">
Well, the id of the component in the produced html isn't innerPg_1, it is formId:innerPg_1.
So, in your css you should use the following rule: #formId\:innerPg_1 .ui-panelgrid-cell {...}. (Don't forget the slash!!)
I'm not sure what are you trying to achieve, but at first, try just to change the background-color, just to check if the rule is being overrided
Also, using styleClass instead of id might be a better option, so you could reuse it for another panelGrid
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 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>