Content overflows in fullscreen becuase of button panel

[VrbovskyM]

I have trumbowyg editor in modal window. When I open it in fullscreen, it overflows the modal div if the button panel goes into two lines.
This is the modal div. You can see in the bottom it overflows.



Here is screenshot when button panel is in one line (doesnt overflow)

[Alex-D]

I think it's fixed in the lastest 2.27.2 release :)

[VrbovskyM]

I used the latest CDNJS for trumbowyg.min.js
And now it seems like its not scrollable. The more I type the more it grows vertically. is there something else I should download with the new version ?
Is <script src="https://cdnjs.cloudflare.com/ajax/libs/Trumbowyg/2.27.2/trumbowyg.min.js"></script> not enough ?

[Alex-D]

It would be best if you had the last CSS too

[VrbovskyM]

Hmm. The overflow is fixed but the scroll behaves weirdly.
This is before 2.27.2. You can see theres scroll bar on right. (no height set for the div that holds trumbowyg textara)

This is with 2.27.2 js and css. It just grows (no height set for the div that holds trumbowyg textara)

When I set height for the div that holds trumbowyg. It kinda works, but it also scrolls the button panel

Im sorry if Im missing something crucial. But I would like this library to work for me.

[Alex-D]

Did you try to set the height of your source element (textarea or div) instead?

[VrbovskyM]

I tried setting height to the div and textarea. When I set the height to the div. it is scrollable, but also button panel scrolls.
When I set it to textarea of trumbowyg, it gets ignored. Nothing happens
(Im using tailwind h-80 means height: xrem)

<div>
     <textarea name="content" id="trumbowyg-editor" class="h-80 overflow-y-scroll "></textarea>
</div>

[Alex-D]

Hum, I use a fixed size on the Trumbowyg landing page so that it can work.

You should not set the overflow yourself, only the height.

If you can give me a simple demo page, I may be able to help you :)

[VrbovskyM]

Sure, here is simple fiddle with trumbowyg in modal
https://jsfiddle.net/kf7e5zct/

[Alex-D]

Hey!

I've made some adjustments:
https://jsfiddle.net/negqhs7u/1/

• Only one CSS trick to get the editor to take full height (see CSS part)
• Use Flexbox in your modal to make the #trumbowyg-div take all height it can

<div id="modalContent--article" class="... flex flex-col">

And

<div id="trumbowyg-div" class="... flex-1">

I hope it helps :)

[VrbovskyM]

Hi. Thank you for looking at it!

Few issues still persists tho.
When you write bunch of long text, the editor is going to eventually overflow from to modalContent div. Both in fullscreen and not fullscreen.
Few interesting things I noticed
If you write long text in non-fullscreen, its going to overflow.
If you put it in fullscreen with already long text thats overflown, the text wont be overflown but white background is.
If you put empty editor to fullscreen and start typing long text, it behaves correctly. No overflown. However, if you put it out of fullscreen and back to fullscreen, its gonna have that weird white overflown.

These issues never occured before the 2.27.2 version. Never had to set any height to div or trumbowyg or anything. It just all worked nicely. Except the little overflown because of button panel. I thought you would just change some calculations. But it seems you did more things since it kinda broke for me.