Vertical text in Column and Fields

[tim.young]

I can see this being handy to save space on a table layout, but I honestly haven’t put it into practice for anything, If anyone has any cool use cases, please share!

Here’s my code for that. Replace with your own element ID and column span.

#x_element_page_4_41 > div.table-responsive > tb-table-group > div > div > tb-table > div > table > thead > tr > th:nth-child(5) > span:nth-child(1) {
    writing-mode: vertical-rl;
    text-orientation: upright;
    letter-spacing: -2px;
}
span .badge {
    writing-mode: vertical-rl;
}

[SafetyUniversity]

To add to @tim.young posting:

Here is some CSS that should help orient the text to be vertical, reading from the bottom up:

#x_element_page_X_X > div.table-responsive > tb-table-group > div > div > tb-table > div > table > thead > tr > th:nth-child(1) {
  writing-mode: vertical-rl;
  /*text-orientation: sideways;*/
  transform:scale(-1);
}

Hope it helps,
Adam

[safetyinmind]

I know this is a “101” question - I’m just starting with TB. Could you please specify what to copy and what to replace? If I copy the element ID of a table I get:

TB.render(‘component_3’, function(data) {

//add custom code here

});

I’m assume I want “component_3” as my element ID. What part of “#x_element_page_X_X” do I replace exactly?

I’ve tried

#x_element_page_component_3 > div.table-responsive > tb-table-group > div > div > tb-table > div > table > thead > tr > th:nth-child(1) {

writing-mode: vertical-rl;

/text-orientation: sideways;/

transform:scale(-1);

}

Without result

[tim.young]

Hi @safetyinmind

This code …

TB.render(‘component_3’, function(data) {

//add custom code here

});

is actually different than what you need for this post. TB.render is our JavaScript API.

To find the Element ID of an element/component in the Live App…

1. Preview your page or view the Live App
2. Right click on the table component, somewhere near the top edge of the table works well
3. Depending on your browser, you may see something different but we’re looking for Inpsect Element. It could be under Developer Tools → Inspect

[safetyinmind]

Thanks Tim,

I tired what you suggested and found the correct ID to use. It works now.

Appreciate you taking time out to explain.

[Shumon]

Tim - do you know how to limit height of table row. I have a field which is rich text and is used for long text description. I display this field in my table but when load the row height is massive so alot of scrolling is involved before next row can be reached. I wanted to limit the rows to a max hieght. Is that possible?