Allow more than 3 lines for a table cell

[NewtonSandey]

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.

[Wlad_Masi]

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.

[cristiand · Accepted solution]

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;
}

[AnandKu]

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

[mishka · Accepted solution]

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]

Thanks! works perfectly

[AnandKu]

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

[Kdober]

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

[AnandKu]

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 🙂