Wednesday, September 27, 2023
HomeCSShtml - Decreasing the dimension of a short-content column in a Primefaces...

html – Decreasing the dimension of a short-content column in a Primefaces Datatable


I am making use of Primefaces 6.2.17 as well as I have a dataTable with generally 2 sorts of columns:

  • Columns which contain extremely brief messages
  • Columns that can consist of messages of variable size that can be brief or lengthy

For the columns with brief messages, I wish to define a taken care of sized. For the various other columns, I desire them to use up the staying room, making use of as much room as each specific column calls for to totally present its web content (ideally) or the room required to present its column-header. Nonetheless, the size of the table ought to never ever go beyond the size of the web page.

This is my present execution:

<< p: dataTable id=" myTab" widgetVar=" myTab"
var=" record"
tableStyle=" table-layout: dealt with; white-space: nowrap; size: 100%;".
... >. < p: column headerText=" Day" size=" 6%" design=" text-align: facility">>.
<< h: outputText worth=" # {document.Date} "/>>.
<.
<< p: column headerText=" Call">
<> < h: outputText worth=" # {document.name} "/>>.
<.
<< p: column headerText=" Categorie">
<> < h: outputText worth=" # {document.categorie} "/>>.
<.
<< p: column headerText=" Remark">
<> < h: outputText worth=" # {document.comment} "/>>.
<.
<< p: column headerText=" Writer" size=" 5%" design=" text-align: facility">>.
<< h: outputText worth=" # {document.author} "/>>.
<.

...

<.

As you can see I utilize the size quality of p: column to establish the dimension for columns with dealt with dimension for those columns with brief messages. I establish absolutely nothing for the various other columns of variable lenght. This present execution makes it to ensure that the staying room (for columns of non-fixed dimension) is similarly dispersed in between the staying columns, despite the dimension of their web content:

enter image description here

I wish to transform this to ensure that the columns are just as broad as they require to be to present or their web content, similar to this:

enter image description here

Exactly how can I accomplish this?

RELATED ARTICLES

Most Popular

Recent Comments