Qlik Community

App Development

Discussion board where members can learn more about Qlik Sense App Development and Usage.

Announcements
Now Live: Qlik Sense SaaS Simplified Authoring – Analytics Creation for Everyone: READ DETAILS
cancel
Showing results for 
Search instead for 
Did you mean: 
usama_waqar94
Contributor
Contributor

QlikSense Straight table background color

Hi Experts,

Please suggest some solution to do header background color in Straight Table (QlikSense native object).

Many Thanks

 

Labels (2)
1 Solution

Accepted Solutions
MartW
Creator
Creator

@salonicdk28  is right. you need the multi kpi object for this.

this can be located here

MartW_0-1656065813829.png

I would advice reading this post.

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

there is an example that fit your needs

Also here is the CSS to get you started

/* -- styling background straight table -- */
.qv-st table {
background: linear-gradient(to right, #25c481, #25b7c4);
color: white !important;
border-collapse: unset;
}

.qv-st-header>tr {
background-color: rgba(255,255,255,0.4);
color: white !important;
}

.qv-st-header .qv-st-total-cell, .qv-st-data-cell, .qv-st-header-cell {
border-bottom: 1px solid rgba(255,255,255,0.2) !important;
}

.qv-st-data-cell-null-value {
background-color: unset !important;
}

.touch-off .qv-st-interactive:not(.qv-st-selections-active):not(.qv-st-reordering-active) .qv-st-header:not(.qv-st-custom-header) .qv-st-header-cell-search:hover:not(:active):not(.qv-st-header-cell-search-open), .touch-off .qv-st-navigatable:not(.qv-st-selections-active):not(.qv-st-reordering-active) .qv-st-header-sortable:not(.qv-st-custom-header):hover:not(:active):not(.qv-st-header-cell-search-open) {
background-color: #006581;
cursor: pointer;
}

.qv-st-bottom-header .qv-st-total-cell {
border-top: 1px solid #fff;;
color: #fff;
}

 

View solution in original post

4 Replies
salonicdk28
Creator
Creator

For this, you need to write styles (CSS) in multi KPI object 

MartW
Creator
Creator

@salonicdk28  is right. you need the multi kpi object for this.

this can be located here

MartW_0-1656065813829.png

I would advice reading this post.

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

there is an example that fit your needs

Also here is the CSS to get you started

/* -- styling background straight table -- */
.qv-st table {
background: linear-gradient(to right, #25c481, #25b7c4);
color: white !important;
border-collapse: unset;
}

.qv-st-header>tr {
background-color: rgba(255,255,255,0.4);
color: white !important;
}

.qv-st-header .qv-st-total-cell, .qv-st-data-cell, .qv-st-header-cell {
border-bottom: 1px solid rgba(255,255,255,0.2) !important;
}

.qv-st-data-cell-null-value {
background-color: unset !important;
}

.touch-off .qv-st-interactive:not(.qv-st-selections-active):not(.qv-st-reordering-active) .qv-st-header:not(.qv-st-custom-header) .qv-st-header-cell-search:hover:not(:active):not(.qv-st-header-cell-search-open), .touch-off .qv-st-navigatable:not(.qv-st-selections-active):not(.qv-st-reordering-active) .qv-st-header-sortable:not(.qv-st-custom-header):hover:not(:active):not(.qv-st-header-cell-search-open) {
background-color: #006581;
cursor: pointer;
}

.qv-st-bottom-header .qv-st-total-cell {
border-top: 1px solid #fff;;
color: #fff;
}

 

usama_waqar94
Contributor
Contributor
Author

Great .Thank You @MartW . 
After using above mentioned CSS in Multi KPI object. Do we have any option to hide Multi KPI object from sheet or how can we keep the CSS properties over the straight table.

As of now, I have used the CSS code in multi KPI object and if I remove the multi KPI object CSS properties are automatically disappearing from Straight Table native object.

Please suggest.

 

Many Thanks

 

 

salonicdk28
Creator
Creator

Hi

To hide multipKPI object, you need to write the below expression in styles to hide it

div[tid="Object ID"] {
opacity: 0 !important;
}

Object ID, you will get by following below steps-

  1. Open a sheet in a Qlik Sense app in your browser
  2. Add /options/developer to the url
  3. Right click on an object and choose "Developer"

lDeveloper menu in Qlik Sense client