When creating visualizations for Qlik Sense, the following basic types of Cascading Style Sheets (CSS) are supported:
- Inline: code is written into the tag and is only having an effect to the tag in which they are applied to.
- External: code is created in a separate document and are attached to the visualization.
It is good programming practice to keep your styling in a separate css file. Separating the content from the design makes it easier to maintain your visualizations.
Qlik Sense set the CSS class qv-object-[extension name] on your visualizations and your CSS rules should be prefixed with that.
Example: Prefix CSS rules
.qv-object-com-qliktech-horizlist .qv-object-content {
overflow: auto;
}
.qv-object-com-qliktech-horizlist ul {
list-style: none;
}
.qv-object-com-qliktech-horizlist li.data {
display: inline-block;
margin: 3px;
padding: 4px;
border-top: 1px solid #ddd;
border-left: 1px solid #ddd;
border-bottom: 1px solid #111;
border-right: 1px solid #111;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}Loading style sheets
There are several ways of loading style sheets into your visualization extension:
- Loading and adding the content of a CSS file to the document header
- Adding a link to a style sheet to the document header
- Using the RequireJS CSS plugin
Qlik Sense set the CSS class qv-object-[extension name] on your visualizations and your CSS rules should be prefixed with that.
Loading and adding the content of a CSS file to the document header
You can use RequireJS and the text! prefix in the define statement to inject the content into the header of the current document.
Qlik Sense includes the RequireJS plugin for loading text resources, which can be used to load a specific CSS file. Assuming you have the following file structure:
When prefixing a path with text!, the text plugin loads a file and passes its content to a variable.
define( [
'jquery',
'text!./css/myStyle.css'
], function ( $, cssContent ) {
// cssContent now contains the content of myStyle.css
// Let's inject the CSS declarations into the header of the current document
$( '<style>' ).html(cssContent).appendTo( 'head' );
} );- $("<style>") creates a new object.
- The content of the cssContent variable is then assigned to the inner content of the style object.
- The style object, now including the CSS content, is added to the <head> section of the current document.
Adding a link to a style sheet to the document header
You can add a link to the style sheet and append it to the head of the document.
define( [
"jquery"
], function ( $ ) {
$('<link rel="stylesheet" type="text/css" href="/extensions/my-extension/css/myStyle.css">').appendTo("head");
} );Using the RequireJS CSS plugin
You can use the CSS loader plugin of RequireJS to load your style sheets.
define( [
"jquery",
"css!./css/myStyle.css"
], function ( $ ) {
// Nothing more is needed
} );Reusing CSS files for multiple visualizations
You can reuse your CSS file if you are creating multiple visualizations that should have the same styling applied. Then store the CSS in a separate folder and link to it from the visualizations for which it should apply.
Short hand styling
To improve performance and make the CSS file load faster, it is good programming practice to code your style sheet using short hand.
Example: Styling short hand
Instead of this:
#potatoe {
margin-left: 3px;
margin-right: 4px;
margin-top: 5px;
}You should do this:
#potatoe {
margin: 5px 4px 0px 3px; // top, right, bottom and left values respectively.
}Examples
The below CSS examples are included in the Simple table code example, included in your Qlik Sense installation.
Example: Loading CSS content and adding it to the HTML page
define(["jquery", "text!./simpletable.css"],
function($, cssContent) {
'use strict';
$("<style>").html(cssContent).appendTo("head");Example: simpletable.css
.qv-object-com-qliktech-simpletable div.qv-object-content-container {
overflow: auto;
}
.qv-object-com-qliktech-simpletable td,
.qv-object-com-qliktech-simpletable th {
border-top: 0px solid #fff;
border-bottom: 1px solid #ddd;
border-right: 1px solid #ddd;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
cursor: default;
font-size: 12px;
}
.qv-object-com-qliktech-simpletable td.numeric {
text-align: right;
}
.qv-object-com-qliktech-simpletable button {
width: 100%;
}