Quill: 100% height page spill

[SOEL86]

When I use the CSS html, body { height:100%; overflow:hidden; }, the quill spills over the bottom of the page by the current height of the toolbar.

Steps for Reproduction

1. Visit http://codepen.io/MichaelMC/pen/NdjMyZ
2. Edit the quill and hold return until the scroll bar appears.
3. Type some characters.

Expected behavior: Bottom of scroll bar visible Toolbar remains visible.

Actual behavior: Bottom of scroll bar is lost. Toolbar becomes lost.

Platforms: Tested on Windows 10 Chrome

Version: 1.2.0

[benbro]

.ql-editor has height:100% in the theme.

You can try giving it 100% - toolbar-height:

#editor {
  height: calc(100% - 40px);
}

[SOEL86]

Nice, I didn't know about calc(). Extremely useful. Problem is if the container width is small, the buttons wrap, making the bar greater than 40px.

Three possible solutions I can see are:

1. sizing each button to a percent of the bar size.
2. making a "show more tools" button appear when toolbar is below a certain width.
3. updating the height of the editor with javascript when the container changes size.

[benbro]

For this you can use flexbox.
http://codepen.io/anon/pen/wgdXeM

[SOEL86]

I just got there myself. That's the ticket.

[SOEL86]

I just noticed that the toolbar still disappears when you type at the bottom of a long document.

[SOEL86]

http://codepen.io/MichaelMC/pen/NdjMyZ/

Looking at this, the top value changes to -42. What's doing that?

[justinpincar]

FYI In case anyone is wondering how to get 100% height of a flexbox container - the editor itself needs display: flex.

http://codepen.io/justinpincar/pen/gWdeRJ