Making Holistics tables display properly with images

Tips and Hacks
,
1

: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?

Displaying Table Image
Displaying Table Image2185×366 53.7 KB

: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
2

Hi, how to include image in a table using html in holistics. I am new to the platform, could you please guide me

3

Hi @hari,
I see you’ve found the nice tip on <Embedding an image in your dashboard> posted by David, and joined the conversations there. Hope it’s useful!