extjsfroala

ExtJS 7 Force Froala editor to fit parent component size

Is it possible to configure Froala editor so that it always matches the size of the parent component in height and width?

Currently it goes beyond the boundaries of the parent component as the amount of text increases, not matter what layout I am using.

I have checked the list of available options and examples, but did not find an appropriate settings. The only option I can use now is explicitly set height and width for a Ext.froala.Mixin.editor config.

I am using ExtJS 7.2, modern toolkit.

Fiddle

I expect a scroll inside a Froala editor component, but instead a Froala editor component exceed height of the parent component.

Solution

  • Set overflow: auto; for flora wrapper:

        .fr-box.fr-basic.fr-top .fr-wrapper {
        overflow: auto;
    }

    Fiddle