Fit height and width to content....simply ....doesn't work!

This topic is for Bubble developers team … @emmanuel

When you setting an element with “this element can fit width to content” and “this element can fit height to content”…

  1. In the editor (the element preview), the instance.canvas dom element is set almost to a width of 300px and not to the content width.

  2. When you lock width of the element, the preview iframe get in an infinite loop that try to adapt height to the content.

  3. When you lock height, the preview iframe get in an infinite loop trying to adapt width to the content

  4. Every choose don’t has any effect to the output (this can be solved width opportune code workaround by myself).

TEST SETUP:
I have append a div with static dimensions (a content) inside the canvas element.
Screenshot 2022-05-16 at 19.07.15

With settings below I got the height infinite loop

With settings below I got the width infinite loop

In every cases width is ever 300px minimum and there is not effect in output (the result page).

I’m waiting for a quick fix. Thank you.

3 Likes

UPDATE: Still a bug, need to refresh between every change of the element

To anyone reading this today, you can get fit width to content & fit height to content working in the preview now. First, I made sure all the responsive boxes checked in the plugin editor. Then, not only did I make sure the instance.canvas had the width and height I wanted, I made sure the content was exactly that width and height as well. The child element is a <canvas> element and tUhe height and width is exactly the same as instance.canvas.

Works in this case!

Screenshot from 2024-07-31 11-55-26
Screenshot from 2024-07-31 11-55-33

EDIT: It works, but not really. Still a bug

Okay, if you change the size of the element you’re working on the editor will not fit width or height to content. If you refresh the page, it will work as expected though. Basically, it only works on the first render! Needs to be fixed by the bubble team