How to set height of HTML element to initial content? [HTML CKEDITOR Plugin]

Hey everyone, I’ve reached out to the publisher of this plugin: https://bubble.io/plugin/html-ckeditor-1544435578575x943111953013014500 with no response, so I’m wondering if someone savvy in CSS styling can help me with a workaround.

This HTML CKEDITOR element has been pretty handy for offering an HTML input. I’m working with an app that uses it to allow users to compose HTML email content. The app pre-fills the input with template copy, and this works just great, however, the various templates can be quite lengthy and we’d like a way to auto-size the height of this editor element to fit the initial content. It has to be dynamic because there are multiple templates and we’d like for the default height to be relatively short (unless forced taller by the initial content).

The CSS will need to specifically identify this element, but I need some help with the code. Anyone have ideas?

Here’s a test page:
https://coachingbubble.bubbleapps.io/version-test/html_editor?debug_mode=true

And editor:

The input has some long initial content. When you preview, you’ll see the element doesn’t “stretch to fit.” Would love a solution for this. Better yet, if the plugin developer is reading, perhaps build in this functionality!

Thanks!

Something what I tried and worked. I placed the CKEditor inside a group and made that group height 250 and set the height of the ckeditor to be 900. This way it allows to be stretched manually. It can also be done by not using the group but then the ckeditor takes up all of the editing space.

If you want it automatically you need to adjust the plugin yourself.

Thanks for the suggestion! Yeah, I’m looking for it to happen automatically. Hopefully the plugin developer can get back to me soon.

Hi @romanmg,
Sorry for getting delay on this.
now, i added Autogrow extraplugin to this Ckeditor.
Kindly please check and revert back.

1 Like

Hi @manikandan

Loving the plugin, but I can’t get autobinding to work at all, and it keeps deleting the content every time I interact with another element. Not sure if you frequent the forum, but do you know how to solve this?

I’m happy to give some more details if needed.

Yeah, sure.
Please provide any test page, i can check and resolve as soon as possible.

Awesome, thanks for the quick reply!

I’ve set up a test app here.

Autobinding
I can’t isolate any issues here, except that it doesn’t work. I tried checking the Show an alert on success, and the alert never triggers. Not sure if that can tell you something.

Content disappearing
It seems to happen whenever something is updated in the database. I’ve set up two fields, one with autobind and one without (and a save button). If you type something into the html editor and then save it (through autobind or the save button), the content in the editor disappears (though you can undo it).

Page: https://novely.bubbleapps.io/version-test/html-test?debug_mode=true
Editor: https://bubble.io/page?type=page&name=html-test&id=novely&tab=tabs-1

Thanks, Will check and update you.

Page not working.

Hi @manikandan, sorry, I missed your reply.

Managed to delete the page… I set it up one more time now, same link. I’ve tested in Firefox and Chrome, result is the same.

Please share the url, i will look.
Not possible to fix this quickly, i will fix this as soon as possible.

Sure, I understand.

Here are the links:

Page: https://novely.bubbleapps.io/version-test/html-test?debug_mode=true
Editor: https://bubble.io/page?type=page&name=html-test&id=novely&tab=tabs-1

Ok thanks. will let you know as soon as possible.

Thanks, I appreciate it!

Hi @petter,
Autobind was fixed along with enable / disable html stripe tags.

Hi @manikandan,

Now works! Thank you so much!

Hi @manikandan, I read all the threads but I am still experiencing the content disappearing issue. I save a post content to DB and then, when I edit the post, it happens that the post content (visibile in the CKEditor plugin) it disappears on saving.

Unfortunately it seems that it happens randomly. I have tested many many times, also with all the possible combinations with autobinding. Here is my current setting

Can you please check it out, when you have a chance ? Has this anything to do with the “Initial element No” option (which I can not understand what is for) ? Thanks

Hi @stefanof,
“Initial element No” this is mandatory field.
Kindly please update the “Initial element No” , it’s like element id/number to populate the ckeditor into your bubble page.
If you are adding/updating the value of “Initial element No” to any text, it wont occur/cause any issue on updating the value of html content.

Thank you @manikandan. Now I will test it with “Initial element No” set to a text.

One more question. I have played a bit with other parameters like “Is full page?” and “Fit with content” just to see what happens, but it looks like that nothing changes. Here is what I have.

ezgif.com-gif-maker (1)

I would like to have either a fix container or, even better, a container that when enlarged moves down the groups below. Is is possibile to achieve this behavior ?

Best

Stefano

Hi @manikandan, I have made extensive tests but the CKEditor keeps disappearing for no reason. And everytime a new blog post is saved all the content is gone. I did as you told me and put a static initial element id. Can you please double check if this is a bug ? I appreciate because in this situation you understand that the plugin can not be used in live version of application. Thanks !

Hi @stefanof,

“Is full page?” works for creating blog page/email template etc,

Will check about fix container, get back to you once get this resolved.