How to change height of ang-jsonedior

[mariohmol]

How to change height of ang-jsonedior

[agborkowski]

works too:

:host ::ng-deep json-editor,
:host ::ng-deep json-editor .jsoneditor,
:host ::ng-deep json-editor > div,
:host ::ng-deep json-editor jsoneditor-outer {
  height: 500px;
}

works with 100% nice its extendable w/o overflow scroll

[johnny12150]

Same as jackrvaughan.
None of the above methods seem to work when the editor is in both code and text mode.

---

For code mode I use this in styles.css

.ace_editor.ace-jsoneditor {
  min-height: 500px;
}

[jackrvaughan]

None of these solutions seem to work for me when the editor is in code mode.

[MartijnJanJaap]

I have tried all the above solutions. Nothing seems to work for me.
I am using version 3.1.0 with angular version 15.
Update: I had to edit styles.css instead of my component specific css.

[agborkowski]

im searching solutions too :) i think check css properties...

[mariohmol]

HI.. sorry about too long to anwwer.. will look today and get back here

[niteshkatare]

Even I am looking for the solution for height issue.

[mariohmol]

What i did in my project <json-editor class="col-md-12" #editorExample style="min-height: 300px;" [options]="editorOptionsData" [data]="dataStructure"></json-editor> See if that works for you!

[mapleflow]

works by overwrite.

// all height not work for me, i use css works.
// <div style="height:300px;"><json-editor></json-editor></div>
// <json-editor style="height:300px;"></json-editor>
@import "~jsoneditor/dist/jsoneditor.min.css";
textarea.jsoneditor-text{min-height:350px;}

[mariohmol]

I updated the Readme to have this suggestions:

• https://github.com/mariohmol/ang-jsoneditor/blob/master/README.md#troubleshoot

Thanks!!!

[mariohmol]

HI! thanks @johnny12150

is this code you did fix it? cause we can put it in docs

[johnny12150]

@mariohmol
Yes! It works for code mode only.

[mariohmol]

great!! I included in readme!

[gitsunny404]

I have tried all the above solutions. Nothing seems to work for me. I am using version 3.1.0 with angular version 15. Update: I had to edit styles.css instead of my component specific css.

@import "~jsoneditor/dist/jsoneditor.min.css";
textarea.jsoneditor-text {
min-height: 50vh;
}
.jsoneditor {
background-color: #f1f1f1;
padding-block: 1rem;
}
.jsoneditor-tree {
background-color: #f1f1f1;
}
td:nth-child(2).jsoneditor-tree {
text-wrap: nowrap;
}
try this code you will get the customization options in css