Skip to main content
Announcements
Qlik Introduces a New Era of Visualization! READ ALL ABOUT IT
cancel
Showing results for 
Search instead for 
Did you mean: 
NewtonSandey
Contributor II
Contributor II

Allow more than 3 lines for a table cell

I have a standard Qlik Sense Table with multiple comuns, one of them is a details field that usually has a large amount of text.

How can I display all of the data (without increasing width) if Qlik Sense allows max 3 lines?

'Wrap text in cells' is already checked.

Labels (1)
2 Solutions

Accepted Solutions
cristiand
Contributor III
Contributor III

Hi,

With my college @Diego_Busilacchi we were looking into this issue and a way to solve this is to use the Multi-KPI css capabilities.

By changing the QS css it is possible to see all the lines in the cell.

Just place a MultiKPI object in the sheet and add the following css code inside the CSS expression of that component.

.qv-st .qv-st-value .qv-st-value-overflow {
    max-height: none;
}

You can use same css technique to hide this object by adding some extra lines

div[tid='OBJECTID'] {
visibility: hidden;
}

 

Cristian Dorbesi

View solution in original post

mishka
Contributor
Contributor

I've added additional class .touch-on and it works on laptop with touch screen as well

 

.touch-on .qv-st .qv-st-value .qv-st-value-overflow {
    max-height: none;
}

 

View solution in original post

8 Replies
Wlad_Masi
Employee
Employee

Hi @NewtonSandey unfortunately as you said the limit today is 3 lines.
The tool tip still displays the entire data, as it is explained in this Article.

It is also something that would be good to have entered as a feature request on our ideas forum.

To help users find verified answers, please don't forget to mark a correct resolution or answer to your problem or question as correct.
cristiand
Contributor III
Contributor III

Hi,

With my college @Diego_Busilacchi we were looking into this issue and a way to solve this is to use the Multi-KPI css capabilities.

By changing the QS css it is possible to see all the lines in the cell.

Just place a MultiKPI object in the sheet and add the following css code inside the CSS expression of that component.

.qv-st .qv-st-value .qv-st-value-overflow {
    max-height: none;
}

You can use same css technique to hide this object by adding some extra lines

div[tid='OBJECTID'] {
visibility: hidden;
}

 

Cristian Dorbesi
AnandKu
Employee
Employee

Is there a hack for laptops with touchscreen which is causing that by default touchscreen mode is enabled.?

mishka
Contributor
Contributor

I've added additional class .touch-on and it works on laptop with touch screen as well

 

.touch-on .qv-st .qv-st-value .qv-st-value-overflow {
    max-height: none;
}

 

AnandKu
Employee
Employee

Thanks! works perfectly

AnandKu
Employee
Employee

by any chance you have figured out such setting for the new straight table ?

Kdober
Partner - Contributor III
Partner - Contributor III

I'm afraid it's not easy to achieve with the new table (if there is no option for that on the table settings)
A little bit hard to explain, but the implementation of the table is not a html table object. Are just DIVs arranged on the screen. With this, I mean that we could change the size of ALL the cells (not individually) using something like this.

.sn-table-cell {
height: 100px !important;   /*original value is 57px*/
}
.gFuxgR {   /*This class name might be different on a different app or table!, but is the child from  .sn-table-cell and you could use .sn-table-cell > div*/
-webkit-line-clamp: unset;  /*might be a different property for firefox!*/
}

However, the next cell line position is not set to be 'after' the previous row. It is placed to be at 57px from the top, next line at 114px, etc. These value also change dynamically with the scrolling.
So, even though we can change the height of the cell and remove the cut of text on the 3erd line, we cannot change where the next row starts.
Right now, I just did a quick test on this. However, I faced similar issues with the new list box object few months back. It has the same logic as this table, and I wasn't able to customize this type of behavior.

Cheers
Cristian

Cristian Dorbesi
AnandKu
Employee
Employee

Hi yes, i have explored the sn-table-cell as well and came to the same conclusion, it's complicated, the way the DIV is set to allow individual control of the size to facilitate the feature 

.gFuxgR  - generated css from the js file to fit the object ID.

 

thanks for your exploration,we are at the same conclusion 🙂