Vertical Text in Columns and Fields

Please note that this is now available as a plugin for easier installation. While you can use this document as a reference, the recommended method to add this functionality is through the plugin installation wizard. Learn more about plugins here. 

If you need a little more room within a table to have the entire table visible, here is a great way to do so!

Step 1

Find the Element ID. 

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 Inspect Element. It could be under Developer Tools → Inspect

Next, add the following code to the CSS tab of your page. 

Replace with your 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;
}

If you would prefer to orient the text to be vertical, reading from the bottom up, then instead use:

#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);
}

Original Community Post:

https://community.tadabase.io/t/vertical-text-in-column-and-fields/667