Qliksense Table formatting

[prrajendran]

Hi Friends,

I have a Qliksense app with 14 charts/objects in one sheet.  I need to make this fit in a laptop screen and I cant extend to multiple sheets.

Some objects are Pivot tables and some are normal tables.

Is there a way to shrink down the blank space in the top of Pivot table? Is there a way to hide the search icons appearing for each dimension in both pivot and normal table?

or any other suggestions to make the objects smaller to fit in laptop screen? But my requirement is that all the objects should be in a size that can show values.

[therealdees · Accepted solution]

Hi,

Is your sheet set to be responsive? (Basically, if it's on, Qlik will try to fit everything to the page according to the display size of the user)

Technically, you can change everything's size using CSS. For that, you're gonna need to use a Multi KPI (you can find it in Qlik "Custom Objects" >  Qlik Visualization Bundle).

The Multi KPI has a dedicated "box" under Appearance > Styles. Over there, you can edit Qlik's default CSS rules or even override it using "!important" after each parameter.

Try adding these parameters and see what happens. It'll hide some stuff like the sheet title, the filters and stuff. You can get some extra space with these.

div[id="qs-toolbar-container"] {
display: none !important;
}
.MuiGrid-wrap-xs-nowrap{
display: none !important;
}
.sheet-title-container {
display: none !important;
}

The reason you have to use a Multi KPI is because of the "Styles" box that only exists within this object. So I'm afraid you'll have to keep it in your sheet, although you can hide it from the sheet using CSS as well (Display: none)

[prrajendran]

Hi,

Thank you so much for your response. i can see the change in the size.

But how can i hide the search icons for the dimensions in all the tables? i m not good at CSS.

Can you please help?

[therealdees · Accepted solution]

Hi!

You can hide the dimension buttons/filters and the title from the pivot table using the following:

.top-meta-headers {
display: none !important;
}

.left-meta-headers {
display: none !important;
}

header[id="tgCYcU_title"] {
display: none !important;
}

Note that as for the title, you must find the id for the object in your own sheet. In my case it was "tgCYcU_title". To find it out you can right click the object and click inspect. It will navigate to the object in the developer tools.

For the straight table you can remove the headers or only the search icon using the following:

[Search icon]

.lui-icon--search {
display: none !important;
}

.qv-st-header-cell {

display: none !important;

}

Please be advised that CSS might be applied to multiple objects, so you might hide something you don't desire to if you simple use the class as a parameter and not a id as well.

using a '.' means referencing the CSS class while [id=""] will limit the changes to only that object id. You can also combine both, e.g div[id="xyz"] .anyclass {

display: none !important;

}

[prrajendran]

Thank you so much again. It worked.

But I had CSS script to have grey sheet background before changing the responsive sheet to custom sheet.

That is not working now.

This is the script i had. 

.qvt-sheet {
background: #b0afae!important;
}

Can you please help me to resolve this too?

[therealdees]

Do you wish to static color the background of the sheet? If so, you might not need CSS to do so:

1. Click on the background of the sheet

2.  Click on "Styling" option

3. Disable "Background" auto button

4. 2 options will be shown: change the background color to the color you want

[prrajendran]

Sorry, i dont have Styling option in sheet properties. we are on Feb 2022 release.

i think the new version got the option.

[therealdees]

Using either background or background-color worked for me:

.qvt-sheet {
background-color: #b0afae !important;

}

or

.qvt-sheet {
background: #b0afae !important;

}

[therealdees]

You could try using .qv-panel-sheet instead. It also worked for me

[prrajendran]

Hi,

Thank you. But it is not working properly either background or background colour.

If i apply, i m getting the outside of the sheet colour as grey but not where the charts are. This is only happening for custom sheet setting. Responsive sheet gets the grey background.

Here is the screenshot of what i see after applying the script. Please help me out.