Making Holistics tables display properly with images

:question:Question

We use HTML text format to include images in the table. But when we filter the results of the dashboard, the table gets cut off and does not fill out the whole area assigned to it. How to fix it?

:writing_hand:Solution

This issue happens because the rendering of those images can interfere with the auto-resize function of our table.

The suggestion solution here is to use fixed-sized elements so that our table can calculate its size properly, without being affected by the image loading delay. You also should have a good style code to make the images in tables look and behave well.

Here is an example:

  • Move the sizing up to the
    element: style="display: table-cell; width: 70px; height: 70px; overflow: hidden;vertical-align:middle;"
<div style="display: table-cell; width: 70px; height: 70px; overflow: hidden;vertical-align: middle;" {{ rendered_value }} <div/>
  • And keep only style="width: 100%" on the element
<img src='https://...jpg' style="width: 100%"/>
5 Likes