Editor height by default has too much empty space

[dheerajsarwaiya]

Editor height is calculated as sum of block heights + 300px of bottomZone. This extra bottomZone of 300 px is huge for use cases such as comment section, or asking users to write small notes or paragraph.

It would be great if we have option to decrease the bottomZone height.

[neSpecc]

Resolved by #719

[arturcesarmelo]

Wasn't solved, as far as i can see.

Even if you reduce the codex-editor content height, an 300px padding-bottom overflows the editor content.

How can i fix this?

[hata6502]

minHeight option can't set to 0px.
Please fix

this.config.minHeight = this.config.minHeight || 300;

to

this.config.minHeight = this.config.minHeight!==undefined ? this.config.minHeight || 300;

https://github.com/codex-team/editor.js/pull/719/files#diff-e3bf20e89f6b22c16beb3e17fb3c8a60R154

[neSpecc]

@hata6502 you are welcome to fix it and send a PR

[Dectom]

Not fixed, still a problem!

minHeight set to 30 however it still creates a 300px padding-bottom, this is really annoying. Please resolve

[neSpecc]

Not fixed, still a problem!

minHeight set to 30 however it still creates a 300px padding-bottom, this is really annoying. Please resolve

you are using it wrong. There is an unnecessary config wrapper in your code.

[khan9920]

How do I use config in my code? I couldn't find any examples anywhere. Please help!

[yuya-pascolo]

@khan9920

this.editor = new EditorJS({
  holder: 'editor-js',
  ...,
  minHeight : 0
});

[andreykorolev]

When I set minHeight to 0 it creates block with 300 height and then reduces it to 0 after a second.

[roland83]

@andreykorolev

When I set minHeight to 0 it creates block with 300 height and then reduces it to 0 after a second.

I noticed this too. There's a "codex-editor__loader" class with height: 30vh, you'll need to override that

.codex-editor__loader { height: 38px !important; }

This eliminated the resize for me. May need to tweak the value for your use case.

[chris-stafflink]

I added both of these and it now works

.codex-editor__loader { height: 38px !important; }
.codex-editor__redactor { height: 38px !important; }

[nagarjuna-gangadhari]

.ce-block__content, .ce-toolbar__content { max-width: calc(100% - 100px) !important; } .cdx-block { max-width: 100% !important; }
.codex-editor__loader { height: 38px !important; }
.codex-editor__redactor { padding-bottom: 38px !important; }

[mu7ammad1]

.ce-block__content, .ce-toolbar__content { max-width: calc(100% - 100px) !important; } .cdx-block { max-width: 100% !important; } .codex-editor__loader { height: 38px !important; } .codex-editor__redactor { padding-bottom: 38px !important; }

this is true code in style css or global styles in the page