How to Put Custom Content Like a Linebreak Inside P:Column Header

How to put custom content like a linebreak inside p:column header

First of all, you need to remove the headerText attribute from the column and add a header facet inside it:

/*  no_of_sessions = Number of 
 Sessions  */
<p:column ... >
    <f:facet name="header">
        <h:outputText value="#{l10n.no_of_sessions}" 
                  escape="false" style="white-space:pre-line;" />
    </f:facet>
    ...
</p:column>

The escape="false" is relevant so html is escaped, then you can put anything you want in there. If you just want to style content, this is not needed

How to linebreak Tab Header text into 2 lines?

It seems that with the current version of primeng you cannot do that.
With the latest version 7.0.5 you can supply a template for the header.
You could use:

<p-tabView>
<p-tabPanel>
<ng-template pTemplate="header">Soccer<br>sport</ng-template>
    The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. 
</p-tabPanel>
<p-tabPanel>
<ng-template pTemplate="header">Football<br>sport</ng-template>
    Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, The_Godfather parallels the young Vito
    grows.
</p-tabPanel>

See the modified stackblitz for a live demo.

FYI: if you want to update it apparently you'll also need to add "@angular/cdk": "^7.3.1" in your package.json

Line breaks in html table

You can do this by setting a width for the table and you could also use

word-wrap:break-word;

In order to prevent really long words to break out of boundaries.

Width is best set in css:

Edit: include

table-layout:fixed;

Demo

http://jsbin.com/atonut/1/edit

table {
width:500px;
table-layout:fixed;
}

td {
word-wrap:break-word;
}

If your problem is a lot of text rather then incredibly long words, only use width, and leave the word-wrap out. Hope that helps.

How to show multiline text in a table cell

You want to use the CSS white-space:pre applied to the appropriate <td>. To do this to all table cells, for example:

td { white-space:pre }

Alternatively, if you can change your markup, you can use a <pre> tag around your content. By default web browsers use their user-agent stylesheet to apply the same white-space:pre rule to this element.

The PRE element tells visual user agents that the enclosed text is "preformatted". When handling preformatted text, visual user agents:

• May leave white space intact.
• May render text with a fixed-pitch font.
• May disable automatic word wrap.
• Must not disable bidirectional processing.

How to show 2 line in one column in datatable?

The .ui-datatable tbody td has a default style of white-space: nowrap, meaning that long texts won't wrap. You want to override this style by setting it back to white-space: normal.

E.g.

<p:column width="200" styleClass="wrap">

with this CSS

.ui-datatable tbody td.wrap {
    white-space: normal;
}

See also:

• How do I override default PrimeFaces CSS with custom styles?

Antd table how to put text into cell in several lines

Finally here is my solution.

The text for each column contains an \n when there is necessary to have a new line.

After into the table definition I put the style whiteSpace: 'pre':

<Table style={{ whiteSpace: 'pre'}} columns={columns} dataSource={data} title={title} .../>

Thats seems to work as expected.

Specify a line break point for mobile/responsive design

you could try this. https://jsfiddle.net/5vwh46f8/1/

Putting the second word in a span and adding a style inline-block.

<div class="container">
<div class="tab-content">
<div class="col-lg-5">
  <div>
  <h4>Commune : <span>CENON-SUR-VIENNE</span></h4>
  </div>
</div>
</div>
</div>

<style>
h4 span{
display: inline-block;
} 
</style>

Change header styleclass of a panel

I got it to work with the following:

<p:panel styleClass="customTitleBar">
  <f:facet name="header">
    ....
  </f:facet>
</p:panel>

css:

.customTitleBar > .ui-panel-titlebar {
    background: #BBBBBB;
    }

---

Related Topics