Forum Academy Marketplace Showcase Pricing Features

Stretch to fit content (how to best handle it?)

I’ve created a plugin to handle blog posts, with an HTML WYSIWYG Editor and a Blog Post Display Element.

I’ve used the instante.setHeight() method to implement a “stretch to fit content” functionality. The code below (the “update” function of the element) uses the height of the instance to + an adjustment to define the final height.

var div = instance.canvas; // represents the element
if (properties.stretch_to_fit_content) {
        
        var adjust = properties.bubble.border_width()*2+properties.bubble.padding_vertical()*2
        
        // Check if content is smaller than the editorHeight
        if (div.find("#blog-post-content").height() < instance.data.editorHeight) {
			
            // If the content is smaller, set the height to its original value, from the editor
            div.height(instance.data.editorHeight)
            instance.setHeight(instance.data.editorHeight + adjust)
            
        } else {
            
            // If the content is bigger, adjust the height
        	div.height("auto")
        	instance.setHeight(div.height() + adjust)           
        }
        
    }

The problem: bubble is inconsistent with the order in with the elements are loaded and sometimes the blog post overlaps with the footer of the page, probably because the content was not yet loaded.

Is there a way to guarantee this action occurs only after the content is loaded?