Aligning Text and SVG Images Vertically in an eazyBI HTML Measure

Questions & Answers
1

Hello eazyBI community everyone!

I am creating a table in an eazyBI report using a measure whose format is set to HTML . The SVG graphics are embedded via an <img> tag inside the HTML.

The problem is that the text and the image have different heights, and I’d like them to be vertically centered. I am looking for a way to achieve the same effect as:

<div style="display: flex; flex-direction: row; align-items: center;">
    <span><b>count</b> : <span> <img src=… >
</div>

Currently, only display: flex is supported in the measure’s HTML; the flex-direction and align-items properties do not seem to work.
Could you advise how to vertically center the content under these constraints?

Thank you.

Best regards,
NextLife

2

Hi @NextLife,

eazyBI only supports a limited set of CSS properties in HTML-formatted measures. The allowed properties are:

color, background-color, font-size, font-style, font-weight, text-transform, text-decoration, text-shadow, text-align, word-break, text-orientation

(see the list here: Calculated measures)

This means that while display: flex may partially render, the flex child properties like flex-direction and align-items are not supported and will not take effect.

Best,
Gerda // support@eazybi.com