Force linebreak OutputLabel - css

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;" />

Related

Datatable filter wrong space between header column and filter

I'm developing an webpage with Primefaces + JSF. I did an filter on dataTable with p:selectCheckboxMenu, but appears between filter and header column some white-space, I've tried to remove it, but no success.
My filter is using a custom object with custom, if I use p:selectOneMenu spaces not appears.
Someone could help me, please?
Page inspector image
My filter code:
<p:column id="columnEmployeePost" filterBy="#{profile.employeePost}"
filterMatchMode="in" filterStyle="white-space: normal;"
headerText="#{language['language.datatable.profile.employeePost']}" style="white-space: normal;">
<f:facet name="filter">
<p:selectCheckboxMenu id="employeeFilter" value="#{employeePost}"
onchange="PF('datatableVar').filter()"
converter="employeeConverterFilter"
label="#{language['language.datatable.profile.employeePost']}"
style="width: 100px; display: inherit; margin: 0 auto;" showHeader="true">
        <f:selectItems
value="#{profileController.employeePosts}" var="selectEmployee"
itemLabel="#{selectEmployee.description}"
itemValue="#{selectEmployee}" itemLabelEscaped="true"/>
        </p:selectCheckboxMenu>
</f:facet>
<h:outputText value="#{profile.employeePost.title}" style="white-space: normal;"/>
</p:column>

How can I give style to a p:fragment in Primefaces?

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

Using a link inside p/h:panelGrid columns

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.

Apply styleClass to parent panelGrid element and not to children

I'm trying to apply a styleClass to a h:panelGrid without applying it to its children:
<h:panelGrid id="mainPanelGrid" columns="2" width="100%" styleClass="topAligned" >
<p:fieldset id="fs1" legend="fs1" style="width: max-content">
<h:panelGrid columns="3">
<p:outputLabel for="id1" value="#{messages.label_application}" />
<p:selectOneMenu id="id1" required="true" value="som">
<f:selectItem itemLabel="#{messages.label_select}" noSelectionOption="true" />
<f:selectItems value="#{bean.availableItems}" />
</p:selectOneMenu>
<p:message for="id1" />
</h:panelGrid>
</p:fieldset>
<p:fieldset id="fs2" legend="fs2" style="width: max-content">
<h:panelGrid columns="3">
<!--more fields-->
</h:panelGrid>
</p:fieldset>
</h:panelGrid>
My topAligned css:
.topAligned td{
vertical-align: top !important;
}
The problem is that I need to top align the two fieldset and that works well with the styleClass I apply, but it also applies this styleClass to all the children. Therefore, all the fields (outputLabel, selectOneMenu, etc...) of the two fieldset get top aligned too...
I tried all the different ways to specify the top alignment from this question but without success... I also tried to look at the html source but it gets a bit confusing with all the jsf and primefaces stuff...
If you know a trick that will work...
With
.topAligned td{
vertical-align: top !important;
}
and the JSF-generated HTML output
<table class="topAligned">
...
</table>
you're basically applying the style on every single <td> element of the <table>, also those of the nested <table>s.
If you want to apply the style on only the immediate <td> elements of the parent <table>, then you should be using columnClasses attribute instead:
<h:panelGrid ... columnClasses="topAligned,topAligned">
with
.topAligned {
vertical-align: top;
}
This will end up in the generated HTML output as follows:
<table>
<tbody>
<tr>
<td class="topAligned">...</td>
<td class="topAligned">...</td>
</tr>
</tbody>
</table>
and not be applied on the <td>s of the nested <table>s.
Note that I also removed the nonsensicial !important workaround. It's supposed to be used only when you want to override a hardcoded style by an external CSS style.
Also note that this problem is not specifically related to JSF. JSF is in the context of this question merely a HTML code generator. You'd have had exactly the same problem when dealing with "plain vanilla" HTML/CSS. The problem is more in the lack of familiarity with basic HTML and CSS. On http://htmldog.com you can find decent HTML/CSS tutorials.

JSF panelgrid alignment to top

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>

Resources