Qlik Community

App Development

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

Announcements
Join “Do More With Qlik” with Mike Tarallo to get a first-hand look at the New Authoring Experience, June 29th: REGISTER HERE
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
Contributor III
Contributor III

@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

3 Replies
salonicdk28
Creator
Creator

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

MartW
Contributor III
Contributor III

@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