Press "Enter" to skip to content

Rotate column headers in a List View


I am still not sure, if I do need to share the trick, how you can rotate column headers in a List View, because it is very simple. However, I spent a lot of time, thinking how this could be done with CSS or JavaScript. I came up with 2 solutions: stupid simple and more sophisticated:

1. Stupid Simple

All you need to do is to make your List View headers literal and add a line-break tag after each letter.

Status -> S<br/>t<br/>a<br/>t<br/>u<br/>s

And this is how your List view header will look like:

2. More complex with CSS

In this approach you will need a bit of CSS and you will have to play with the numbers, depending on the length of your header and the height you want your new header to be. If you do not know how to add JavaScript or CSS on Smartforms, please, see the post How to add JavaScript on Smartforms.

In order to concentrate on the columns of 1 List View only, my first CSS selector will select a View by its name, that I gave to it on the form. My test List View name is “viewTestVerticalColumnHeader“. Then you can insert the following custom CSS on the view:

Here is a number of screenshots to demonstrate, how to rotate column headers with CSS:

So have fun with K2 and all the tips and tricks. By the way, I used the approach, described in this article Rotated Column Headers.

Leave a Reply

Your email address will not be published. Required fields are marked *

2 × 3 =