Text panel: Pictures streches when resizing the window

Grafana
1

Hi everyone,

I have a text panel which is showing a picture i got out of the internet. Within the html code i tried to manipulate that picture with the height width and object-fit adjustment so if i resizes the window it wont strech.

<img src="https://example-picture.png" 
style="height: 100%; width: 100%; object-fit: contain;">

The problem now is that if i safe that panel and resize my window it streches my picture.

I inspected the picture itself with my web-browser and the element style filter showed me that the object-fit: contain command was not saved.

The question for me now is if grafana is only receiving the html part after object-fit is a css property ? Or is there a work-around?

My grafana-cloud is running v8.5.2. on a linux machine.

Cheers Grafu

2

what precise panel are you using?

3

Hi there Matt,

i use the normal text panel and implemented a html code like the one mentioned above.

Someone mentioned that i have to set disable_sanitize_html = true in the Grafana config Configuration | Grafana documentation so Grafana won’t sanitize my custom HTML code. Then object-fit: contain should be used.

Is this also possible with the grafana cloud version that i use ?

4

no, you can’t change this setting on Grafana Cloud. It is inherently unsafe. You’d need to self-host your own Grafana :+1:

5

Thank you matt :slight_smile:, i just discovered that via the normal markdown syntax it is possible:

img src=“example.png” height=“auto” width=“auto”

2 Likes
6

nice work! thanks for posting your solution

1 Like