React-ace: How can I set the editor hight auto fit the content ?

[hh54188]

Problem

I don't want to the editor have height, I want the editor show all content without scrollbar, height as the content's height

How should I set the editor's config or the css ?

Sample code to reproduce your issue

References

Progress on: #

[Viijay-Kr]

@hh54188 U can resize the editor height or pass height as prop to the ace editor to accomplish dynamic heights without scrollbar
So if your component looks like this

1. First approach

<AceEditor
  onLoad={onLoad}
  height={someInitialHeight}
  ...
/>

onLoad(editor){
  // Your editor options comes here
   editor.on('change', (arg, activeEditor) => {
      const aceEditor = activeEditor;
      const newHeight = aceEditor.getSession().getScreenLength() *
        (aceEditor.renderer.lineHeight + aceEditor.renderer.scrollBar.getWidth());
       aceEditor.container.style.height = `${newHeight}px`;
      aceEditor.resize();
    });
}



md5-2967d728d81c1ff90dc28eeb85463c7c



```js
getIntitialHeight(editor=){
  if(editor){
  let newHeight;
     newHeight = editor.getSession()
        .getScreenLength() *
        (editor.renderer.lineHeight + editor.renderer.scrollBar.getWidth());
      newHeight = newHeight > 70 ? newHeight : 70;
      return `${newHeight}px`;
 }
 return someInitialHeight
}

I hope this answers your question!

[bmdalex]

@securingsincity
@Vijayk93

tried this and doesn't work for me; editor keeps the same size

[Bizarrus]

You can use the Stylesheet value inherit or the 100% value :)

Sample:

    <AceEditor height="inherit" />
    <AceEditor height="100%" />

[nightwing]

100% will fit the parent, to fit the content use maxLines and minLInes options of ace as shown in https://ace.c9.io/demo/autoresize.html

[Viijay-Kr]

@Bugaa92 Can u create a pen or fiddle so that we can test this?

[adesurirey]

Don't set any height and use maxLines={Infinity} to make the editor height fit to your content and disable vertical scrolling

[hiteshsahu]

maxLines={Infinity}

This actually worked for me

[bluepeter]

Unfortunately, this does not work in the "Split" mode https://github.com/securingsincity/react-ace/blob/master/docs/Split.md ... anyone have ideas on how to achieve the same thing in Split view?