How to freeze the title of a sheet

[evassord]

Hi,

How to freeze the title of a sheet, so that it remains visible even when the user scrolls down an extended sheet ?

Thanks .

Eric

[LisaDrummond · Accepted solution]

Did anyone ever find a way to do this? It's become difficult to navigate with the latest update, as the arrows to change sheets are now in the same line as the Title. If you want to page (arrow) through the sheets, you have to scroll back up to the top. 

[marksouzacosta]

Hi @LisaDrummond ,

This is a long ride and you need to be familiar with CSS. You can inject CSS in Qlik Sense Sheets using the Multi-KPI chart or use App Themes to change the entire Qlik Sense Application. Following some materials to study:

Dashboard Design - QS CSS MasterClass (video) - Page 2 - Qlik Community - 1787091

Styling Sense Tables with Properties and CSS - Qlik Socks Series 1 (youtube.com)

I made some tests and I was able to find the CSS elements to isolate the Title + navigation buttons and the rest of the body of the Sheet:

.qv-object-qlik-multi-kpi {
display:none;
}

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


.sheet-title-container {
position: fixed !important;
top: 80px;
left: 0;
width: 100%;
height: 80px;
z-index: 999 !important;
}

#grid-wrap {
margin-top: 80px !important;
}

In my example I used this code inside a Multi-KPI Style CSS field. 

[Eric_V · Accepted solution]

Hi @marksouzacosta 
Thanx for the answer !

How to combine your instructions with mine :

div[tid="Pdkfe"] .qv-object-qlik-multi-kpi .label {
 font-family: 'Raleway', sans-serif;
border-left: 5px solid #E9EBEE;
box-sizing: border-box;
margin:0 auto;

}

div[tid="Pdkfe"] .qv-object-qlik-multi-kpi .label:hover {
border-left: 15px solid #134391;
background: #E9EBEE;
height: 100%; 
transition: all 0.3s ease 0s; 
}

div[tid="CePmqr"] .qv-object.qv-object-filterpane .qv-fullscreen-hidden, .qv-object.qv-object-filterpane .qv-object.qv-object-listbox {
border: 1px solid #0000; important!} .sel-toolbar-card {
border: 1px solid #0000; important!}

[tid="meta.rows"],[tid="meta.columns"] {display:none;}

.qv-object-nav {
display:none;

[marksouzacosta]

Just add the extra classes at the end of your CSS code - note, you missed a close bracket at the end of your CSS code:

div[tid="Pdkfe"] .qv-object-qlik-multi-kpi .label {
font-family: 'Raleway', sans-serif;
border-left: 5px solid #E9EBEE;
box-sizing: border-box;
margin:0 auto;

}

div[tid="Pdkfe"] .qv-object-qlik-multi-kpi .label:hover {
border-left: 15px solid #134391;
background: #E9EBEE;
height: 100%; 
transition: all 0.3s ease 0s; 
}

div[tid="CePmqr"] .qv-object.qv-object-filterpane .qv-fullscreen-hidden, .qv-object.qv-object-filterpane .qv-object.qv-object-listbox {
border: 1px solid #0000; important!} .sel-toolbar-card {
border: 1px solid #0000; important!}

[tid="meta.rows"],[tid="meta.columns"] {display:none;}

.qv-object-nav {
display:none;
}


.sheet-title-container {
position: fixed !important;
top: 80px;
left: 0;
width: 100%;
height: 80px;
z-index: 999 !important;
}

#grid-wrap {
margin-top: 80px !important;
}

[Eric_V]

Thanks a lot

[LisaDrummond]

Thanks, Mark! We'll give this a try - really appreciate all the info!! Our users will be very happy.