topic Re: Vertical Headers in Table using CSS in App Development

Vertical Headers in Table using CSS

ZoeM — Tue, 02 Aug 2022 18:37:35 GMT

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

Re: Vertical Headers in Table using CSS

justISO — Wed, 03 Aug 2022 07:16:10 GMT

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.

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

Re: Vertical Headers in Table using CSS

ZoeM — Wed, 03 Aug 2022 11:59:55 GMT

thanks, I have tried that and still not working:

Re: Vertical Headers in Table using CSS

justISO — Wed, 03 Aug 2022 13:03:14 GMT

What browser are you using? Internet Explorer?

https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode#browser_compatibility

Re: Vertical Headers in Table using CSS

ZoeM — Wed, 03 Aug 2022 13:13:22 GMT

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?

Re: Vertical Headers in Table using CSS

justISO — Wed, 03 Aug 2022 13:21:00 GMT

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

Re: Vertical Headers in Table using CSS

ZoeM — Wed, 03 Aug 2022 13:25:55 GMT

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.