Skip to main content
Announcements
Introducing Qlik Answers: A plug-and-play, Generative AI powered RAG solution. READ ALL ABOUT IT!
cancel
Showing results for 
Search instead for 
Did you mean: 
ZoeM
Specialist
Specialist

Vertical Headers in Table using CSS

New to Qlik Sense!

I have a table with very long headers and I cant figure out how to rotate the Label headers. Community says it is not possible in Qlik Sense to do it natively but you can use CSS. I have previously used CSS for Sheet properties but not for a table.

The below thread gave some ideas but when I tried the given code in a multi kpi object it didnt work. 

Any ideas please?

Code given from thread: https://community.qlik.com/t5/New-to-Qlik-Sense/Change-Table-Label-Text-Orientation/m-p/1846741

.qv-st-header-cell{
writing-mode: vertical-rl !important;
text-orientation: mixed !important;

Labels (2)
1 Solution

Accepted Solutions
ZoeM
Specialist
Specialist
Author

Yes other CSS Styles work and the one you have provided also works! I have one which changes the sheet background color as well.

.qv-panel-sheet {
background:linear-gradient(209deg, rgba(131,135,130,1) 100%, rgba(222,237,218,0.9948354341736695) 100%, rgba(15,15,15,1) 100%);
}

Not sure why this one does not though.

 

 

View solution in original post

6 Replies
justISO
Specialist
Specialist

Hi, your CSS code actually works. Not forget, that in Multi KPI you must add any 'dummy' measure first (and hide label and hide value). Just then css style start working.

justISO_0-1659510954842.png

Additionally, use 'writing-mode: sideways-lr' maybe, so your text will look at 'right' direction, not left.

ZoeM
Specialist
Specialist
Author

thanks, I have tried that and still not working:

 

ZoeM_0-1659527937014.png

 

justISO
Specialist
Specialist

ZoeM
Specialist
Specialist
Author

Actually I am using desktop version. I think it might be tied to the version of app that I am using. Its May 2021 vs. the latest made available.  Maybe?

justISO
Specialist
Specialist

Not sure does qlik version can impact this. Try simpler css, does it work for you? if not, nothing else I can suggest then.

.qv-st-header-cell{
background-color: #00ff00;
}

ZoeM
Specialist
Specialist
Author

Yes other CSS Styles work and the one you have provided also works! I have one which changes the sheet background color as well.

.qv-panel-sheet {
background:linear-gradient(209deg, rgba(131,135,130,1) 100%, rgba(222,237,218,0.9948354341736695) 100%, rgba(15,15,15,1) 100%);
}

Not sure why this one does not though.