Wrap header names in webui table

Hi @Kai,

We have this feature on our backlog for Table Improvements. It might be a while before we introduce changes to the table. In the meanwhile, you can try this CSS trick that will help achieve the same result.

.tag-table .colheader-viewport tr .cell>div label, .tag-table .rowheader-viewport tr .cell>div label{
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  word-wrap: break-word;
}

 webkit-line-clamp is basically the number of lines you want before the ellipsis on the text. Please let me know if this works for you. So you can change this from 2 to 3 if required.

You can also experiment with word-wrap . This attribute breaks a long word into two lines(or more depending on the space).

Hope this helps! Here is an example with the above style:

Thanks,

Pratap

Hi @Pratap Kumble ,

Thanks for this idea, I have been using this for a while now. But just noticed a bug that I get if I implement this, see the picture below. The table headers don’t align with the data (‘Capability check’ in this overview) anymore. But is corrected somehow at the bottom of the table

And now for the question: do you know how to solve this?

@Pratap Kumble do you have an idea about this?

Hey all! This has been implemented! See more here: https://documentation.aimms.com/webui/webui/table-widget.html#special-settings