Styling Qlik sense Apps using CSS

[deepanshuSh]

Hi, 

I learned CSS usage for the improvement of the look and feel of the dashboard using css, and I thought I should share it with my fellow qlikers. Hopefully, it would be helpful to some beginners if not for the advanced authors. 

Let’s first understand what is CSS and why it is needed at all in the first place.

• In simple language, CSS is a set of codes that are commonly used in styling and improving the appearance of web pages.
• Qliksense doesn’t have much styling and customizability like QlikView, which makes it difficult for the developer to create an appealing and beautiful application for the end user. That’s where the CSS play comes into the picture.

Here is a basic and simpler overview of how to use CSS in the  qliksense.

1. First, add a multiKPI object from the object panel to the sheet.
2. Then add a measure (add number 1, as it would not be showcased on the sheet), and then hide the value and measure from the settings tab.
3. Go to the styles sheet and add the CSS code that you want to use in the sheet.

Link for the tutorial: https://youtu.be/gKOCAeUzTv0 

Process of getting the object ID:

Add the below code for activating the developer mode on the app.

/options/developer

Video to understand the process: https://youtu.be/WEYpOWeDzyQ

CSS for creating a background gradient on the sheet:

.qv-panel-sheet{    background-image: linear-gradient(90deg, #E9EBEE 11.4%,  #ffffff 1%) !important;}

Explanation:

The Degree (‘90deg’) states the direction of the alignment color gradient of the background sheet, and the respective colors depict the percentage of each color in the sheet. Consider the sheet area to be 100% and the color mentioned provides the color in the form of the gradient to the whole sheet area.

By changing the percentage and angle you can change the gradient of the color in the sheet. Play around to find out more.

Uses:

Create a separate section in the sheet for the menu and other KPIs for giving a distinct look to the menu.

CSS for giving color and text alignment to the objects such as bar charts, tables, or piechart as well:

 Just replace the object id (tid) with the object ID of the object that you want to give the colors to or change in the background for the same.

[tid="PUdgRs"] .qv-object {background-color:  #ffffff !important;

border-radius: 20px;

box-shadow: 2px 2px 2px 2px grey;}

[tid="PUdgRs"] .qv-object-title-text {width: 100%; border-radius: 7px;}

[tid="PUdgRs "] .qv-object-title,

[tid="PUdgRs "] .qv-inline-edit-value {text-align: center; vertical-align: middle; font-weight: medium;}

You can try different properties for getting different results and different outputs for the same or even different objects.

Link to video : https://youtu.be/nLfTeEkB02U

For hiding multiKPI object:

/* MultiKPI_HIDDEN */

[tid="FNCEzj"] .qv-object-qlik-multi-kpi { display:none; } .qv-mode-edit .qv-object-qlik-multi-kpi { display:flex}

Change the object ID (tid) with your multkiKPI object ID for hiding it from the user’s view.

Troubleshooting:

If you think code is not working, then check the minor errors such as comma (,), closing of brackets({,}) at the end of the code for each element. And most importantly, missing measure in the data section of the settings.

[André]

This is such a great help, thanks @deepanshuSh !

Any insight on forcing vertical centered alignment of text/image boxes? I've tried the following and several other methods, but doesn't seem to quite work?

[tid="XXXX"] .qv-object div {display: table-cell !important;
vertical-align: middle !important;}

(Where XXXX is the ID of my Text/Image object)

[deepanshuSh]

@André how do you wanna do the vertical alignment? Like with respect to the other objects on the sheet or within the object. 

Like this one below, please elaborate more on this!

[André]

Thanks @deepanshuSh, the default behavior of a text box is to align text to the top like such:

And I would like it to behave like such:

[André]

I managed to get it working by targeting the parent DIV of the one that holds the text and using the following CSS.

[tid="XXXXX"] div:nth-child(1) div div {
display: flex !important;
justify-content: center !important;
align-items: center !important;
width: 100% !important;}

[deepanshuSh]

This is more of a padding and spacing component that you need to target rather than the aligning of the items.

the nth child could work as well but the component has to be defined for only those elements that allow modifications of nth child, like buttons and KPIs. Also another approach could be to use the grouped container and define placement using blank components with the percentage.