ace editor is bigger than its parent div class

Question

I'm trying to use ace editor in my web pages.

ace editor github : https://github.com/ajaxorg/ace

on html body, I inserted ace editor div class in div "third-page" like this

<div id="third-page" style="display: none;">
    <div id="editor"> test </div>
    <button class="btn btn-primary btn-lg" id="priv_3">Previous</button>
    <button class="btn btn-primary btn-lg" id="next_3">Next</button>
</div>

and I declared stylesheet by following instructions in github tutorial.

but it was too small and I wanted to match its parent's size.

I found related stackoverflow page

How to get the ace editor to adjust to its parent div

and tried like this

#editor {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

and the result was like this

div id "editor" is bigger than its parent "third-page" and I tried several things but it doesn't work.

how can I break through this problem?

a user a user · Accepted Answer · 2018-02-13T19:43:42

Set position of third-page to relative, to make absolute positioned children in it relative to that element instead of document.body

ace editor is bigger than its parent div class

1 Answers