toolbars overlaping if you have small size of browser window

[kajomarton]

In chrome, but probably in other browsers too, when you resize your browser window width under cca. 400px
it happens often if you embed etherpad through iframe to your application

[JohnMcLear]

yep. few options being discussed here..

a) tree menu that comes out of left hand side
b) hide some icons (hard to know which)
c) make toolbar span 2 lines

I think each will need to be implemented as a plugin then installed on your server

[kajomarton]

I think third choice is best. Or set min-width and if browser windows size is smaller, just show horizontal scroller.

[JohnMcLear]

@0ip did you want to put forward a fix for this?

[JohnMcLear]

https://github.com/Pita/etherpad-lite/pull/1098

[marcelklehr]

The solution in #1098 is not optimal, as it doesn't take into account how many buttons there are in the toolbar. Imagine having installed 10 plugins with each adding their own button. We should use a flexible solution for this (using css if possible).

[JohnMcLear]

Afaik CSS can't figure out the space used up by buttons inserted by plugins.

[marcelklehr]

The problem is, that the toolbar height is fixed. The buttons wrap
correctly, but the toolbar allows only one line of buttons. If you
remove the toolbar height, that should do the trick, but then other
parts of the layout don't reflow...

[0ip]

I have a fix for that, just give me a few days. ;)

Update: Never mind...
I was able to get rid of the overlapping, but in exchange, IE and FF had severe problems displaying #editorcontainerbox.
However, a temporary fix would involve a bit JS: check if both offsetWidth of the left and right menu are larger than document.body.clientWidth, then set float: left to the right menu and double the toolbar height.But it feels dirty, quite rightly.

[JohnMcLear]

Duplicate of #855