Froala editor toolbar popups appear at the bottom even if there is not enough space to place it

Question

I am using froala editor. https://www.froala.com/wysiwyg-editor

Issue I am facing with this is when editor toolbar is near bottom of window and we open any toolbar popup, for example as shown in image below Image upload popup. Then part of it is hidden even there is no proper space. Ideally it should display on the top of toolbar in this case.

Please suggest how can I solve this.

Answer 1

I got the solution of my issue by modifying the froala_editor.js file. What I did is modified the Show method definition of popup.

Find out below comment and update the if condition with below If/else code.

if (editor.opts.toolbarBottom && $container && editor.$tb && $container.get(0) == editor.$tb.get(0)) {
    popups[id].addClass('fr-above');
    if (top) top = top - popups[id].outerHeight();
  }
  else if (top) {
      if ((top + popups[id].outerHeight() + 31) > ($(window).height() + window.pageYOffset)) {
          popups[id].addClass('fr-above');
          popups[id].addClass('manual-above');
          top = top - popups[id].outerHeight();
          if (obj_height) {
              top = top - obj_height;
          }
      }
  }

and in the hide method remove the class.

popups[id].removeClass('manual-above');

and in the _topNormalized method update below code.

if (p_offset + top + height > $(editor.o_doc).outerHeight() && $el.parent().offset().top + new_top > 0) {
      top = new_top;
      $el.addClass('fr-above');
    }
    else {
        if (!$el.hasClass('manual-above')) {
            $el.removeClass('fr-above');
        }
    }

This works for me. Hope this would help for someone other also.