asked on May 26, 2022
Hi.
I want to ask, is there a way for the pivot table to manage long string input. This input mainly to display a description and usually comes in a long text. I tried by using adjustTableSizes() and set the CSS for .fm-cell to white-space: pre-wrap !important. It did adjust the height of the cell, but some of them still exceeds the height making them not visible. Is there a way so that the cell height match the length of the string input?
Here I attached some of the screenshots for reference.
⋅ May 26, 2022
Hello,
Thank you for reaching out to us.
Please note that we do not recommend using multiline cells, which may lead to alignment issues. However, if it is required for your project, you can implement it with the following CSS rules:
.fm-cell {
white-space: pre-wrap !important;
}
#fm-pivot-view .fm-grid-row {
max-height: 500px;
}
Aside from white-space: pre-wrap, you should also set the max-height for the .fm-grid-row property. You are welcome to check this example: https://jsfiddle.net/flexmonster/Ljqu60gx/.
You can also create tooltips for long cells as an alternative to increasing row height. With this approach, column height stays the same as usual, and users will see full labels by hovering over them. We recommend achieving this functionality with the customizeCell API call. Firstly, you should wrap the cell.text property into some HTML tag (for example, <p>). Then, put the data.label property into the title attribute of the wrapper tag:
function customizeCell(cell,data) {
cell.text = `<p title='${data.label}'>${cell.text}</p>`
}
Kindly check the example of this approach: https://jsfiddle.net/flexmonster/u0Lvcmzq/.
Please let us know if any of these approaches work for you.
Best Regards,
Maksym
⋅ June 2, 2022
Thanks! It works. I used the tooltips method.
⋅ June 2, 2022
Hello,
Thank you for your feedback.
We are glad to hear that the approach with tooltip usage works for you.
Feel free to contact us if any questions arise.
Best Regards,
Maksym
⋅ June 23, 2023
Hi everyone,
I tried the solution to use the label but it is not working. No tooltip shown. can you please help out?
Thank you in advance
⋅ June 27, 2023
Hello, Mirko!
Thank you for reaching out to us.
Based on the provided code snippet, we can conclude that besides the tooltips, many customizations are applied to cells. Perhaps, some other function overrides the changes applied in shortenStringsAndTooltip. We suggest checking the cell's HTML in the developer tools to check if this customization is applied.
Please let us know if our recommendation helped you.
Best Regards,
Maksym
⋅ July 5, 2023
Hello, Mirko!
Hope you are doing well.
We would like to know if you were able to implement the tooltip functionality.
Please let us know if further assistance is required.
Best Regards,
Maksym
⋅ July 18, 2023
Hello, Mirko!
Just checking in to ask if you were able to successfully implement the tooltips in your project.
Looking forward to hearing from you.
Best Regards,
Maksym