search

froala / wysiwyg-editor

The next generation Javascript WYSIWYG HTML Editor.
https://www.froala.com/wysiwyg-editor
Other
5.28k stars 673 forks source link

Is there a way to specify the container for the toolbar button options? #2652

Closed wrporter closed 6 years ago

wrporter commented 6 years ago

toolbarButtonsMD, etc. base their changes on the device or window size. The editor may not always expand from the edges of the browser. Is there a way to specify that toolbarButtonsMD, etc. go off of the width of the container rather than the width of the browser window?

stefanneculai commented 6 years ago

Yes, just change the following. It's LESS code.

// Screen sizes.
@screen-xs: 480px;
@screen-sm: 768px;
@screen-md: 992px;
@screen-lg: 1200px;
@screen-xs-max: (@screen-sm - 1);
@screen-sm-max: (@screen-md - 1);
@screen-md-max: (@screen-lg - 1);
@screen-lg-max: 'auto';

.fr-visibility-helper {
  display: none;
  margin-left: 0px !important;

  @media (min-width: @screen-sm) {
    margin-left: 1px !important;
  }

  @media (min-width: @screen-md) {
    margin-left: 2px !important;
  }

  @media (min-width: @screen-lg) {
    margin-left: 3px !important;
  }
}
Iverson23 commented 2 years ago

I'd like to reopen this question. I have a use case, where editor is inside a container which can be resized on its own. That means that there is no need for the whole window to be resized in order to change froala width. Is there a way to specify resizable container that froala should be watching for? Or simply notify froala to check for its own width (or pass the width) and act accordingly.