Quill: autoheight for the content area

[dohomi]

Hello,

does quill supports autoheight? Currently the height seems to be fixed, I would like that the content area is not restricted in the height.

Thanks,
Dominic

[jhchen]

The height should 100% of the height of the container you give it. It should adjust if you change the container height too (as the height is based on css). Feel free to reopen as a bug if it's not working for you (with what browser/os you are using).

[dohomi]

Is it possible to have an autoresize? I don't want to show a fixed height at all, I want that the height increases with line breaks of the content editor. Is this possible?

[jhchen]

I see you want the editor to expand to fit the content (thus it should never scroll). Currently this is not an option. I'll reopen and mark this as a feature request.

[dohomi]

Ok thanks!

[vegetableman]

I think, It could get as simple as setting scrollHeight of the content-editable div to the parent container, quill is called with. another module for this?

[TooTallNate]

A non-perfect version is something like:

editor.on('text-change', function(delta, source) {
  editorContainer.style.height = editor.root.ownerDocument.body.scrollHeight + 'px';
});

That doesn't properly handle the "shrinking" case though of deleting lines and having the height become smaller.

[jd327]

+1 on this. Any estimates on ETA?

[jhchen]

I'm envisioning this would be a good candidate for a module which will come after v1.0 since the module system is being reworked right now so unfortunately it does not seem like a near term task.

[u9520107]

Is there particular reason to have the 'editor-container' class in the iframe to have 100% height?
Since the body is set to 100% and does the overflow control, perhaps this element doesn't have to be set. That way we can use getBoundingClientRect() to get the size of the content and resize the container in the root document.
--edit removing the height makes empty containers to only have 1 line to click on.
--using min-height: 100% would allow the editor-container to take all the body height when empty, and expand when filling up with content. This way we can probably use getBoundingClientRect() on content change and change the root container size accordingly.

[jhchen]

Yes the reason for the editor-container taking the whole body/iframe is so you can click into anywhere in the editor and it will gain focus. Otherwise there's a large area of the editor that is taken up by the iframe but not by the editor-container so clicking anywhere in this area will do nothing.

One check that might work is the iframe offsetHeight should always equal to the body offsetHeight to autosize the editor.

[u9520107]

@jhchen
But the body is configured to follow iframe's size, the value should always be the same... no?
Anyways, expansion can be done easily by using scrollHeight, or if editor-container uses in-height instead of height 100%, the boundingClientRect can also be used.
But as both settings forces the editor-container to take at least 100% of the height of the body, shrinking doesn't work.

I think it might be better to handle click on body to focus the editor-container, and still allow editor-container have height set to auto.

[jhchen]

Sorry I meant scrollHeight but yes it would not solve the shrinking problem. The solution might be to overwrite the 100% height then since if the height is being managed by javascript the reason it's 100% in the first place is not a concern.

[sferoze]

I really want this feature, any updates? Currently I am using the makeshift hack to expand the editor with the code:

self.editor.on 'text-change', (delta, source) ->
  self.$('.quill-editor').height(self.editor.root.ownerDocument.body.scrollHeight)

But it does not work really well in all cases, because as the page changes, I have to keep setting the height with javascript and it is pretty unsustainable practice.

Also I noticed on mobile, the Quill Editor always has a scroll bar no matter what. I cannot get rid of the scrolling on mobile, even if I set the height to the scrollHeight....

[jhchen]

Iframes have been removed in v0.19.0 so the container should grow by default now if there's no fixed height styling.

[sferoze]

Wow I cant wait to try out the new Quill in my app once I get home. I am pretty excited for this update, thanks again @jhchen

[djl132]

wait, so how do i set and make it grow, then. I've been trying to do that for DAYS.

[benbro]

auto-grow example in the docs.

[Vandana1992]

Can we have editor to behave like textarea so that there would be draggable feature.Is this feature available in quill?