How to change font in a Qlik Sense straight table?

[tanmay_bhardwaj]

I am exploring the new straight table offered in the visualization bundle. But unable to find a way to modify the font and font size of the content in the rows. Is it possible to modify them by any means?

Environment: Qlik Sense Enterprise Client Managed for Windows

Version: QlikSense May 2023

[Zapparoli]

Hi Tanmay,

You can change the font size inside the "Presentation tab and Styles" 

Then you can set it here: 

For the font however, you will need to apply some CSS directly on your table.

First you will need a Multi-KPI Object on your Sheet.

You will need to insert a dummy measure for it to work like: 

After that, go to "Appearance - Styles" Inside the Styles (CSS) Box paste this:

.qv-st-header-cell-wrapper {
font-weight: bold;
font-family: 'Roboto', sans-serif;
}
.qv-object-qlik-multi-kpi {
display: none;
}

.qv-mode-edit .qv-object-qlik-multi-kpi {
display: flex;
}

This will make the Headers Bold, and set the font to "Roboto". Finally it will hide the Multi-KPI object when you are NOT in edit mode.

Let me know if it helps.

-Zapparoli

[tanmay_bhardwaj]

@Zapparoli thanks for your reply. The CSS in your answer works perfectly on a 'Table' chart but it doesn't work on the 'straight table'. Could you please help check it for 'straight table'  as well.

Also, how can I make more CSS commands like the one that you gave, is there any way to see the backend layout of a Qlik sense chart and make CSS changes as required.

[Zapparoli]

Hi @tanmay_bhardwaj.

Sorry about that, It seems I don't have the straight table object, but it's quite easy to find out!

You basically go into developer tools of your browser (Usually F12) and inspect the element of the table.

See attached photo to find out how I found the ID of a Pivot Table Header.

I used the inspector tool and found out that the header part of the pivot table is .qv-pt .cell.header.top . Can you try to do the same on your table and let me know ? 

Yes you can add a lot of other CSS commands, for starters I would check this link, it is how I started:

https://community.qlik.com/t5/Qlik-Sense-Documents/Dashboard-Design-QS-CSS-MasterClass-video/ta-p/17...

CSS in QlikSense is a very exciting topic, and can improve your visualizations a lot!

-Zapparoli