Search code examples
htmlcsstwitter-bootstrapace-editor

Using Ace Editor with Twitter Bootstrap

I'm building the design of a small online IDE with Twitter Bootstrap, but i'm failing to achieve the proper layout due to Ace's height problem. 

<body>
    <div class="navbar-wrapper">
        <div class="container">
            <div class="navbar navbar-inverse">
                <div class="navbar-inner">
                    <a class="brand" href=""><img alt="" src=""></a>

                    <ul class="nav pull-right">
                        bla bla bla
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid">
        <div class="row-fluid">
            <div class="span3">
                <p>This is a sidebar</p>
            </div>
            <div class="span9">
                <div id="editor">asdasdasddas
                asd
                das
                das
                das
                das</div>
            </div>
        </div>
    </div>
</body>

This is a simple Twitter bootstrap navbar and the container, with two grid columns: one for the sidebar, another for the editor. However, the Ace Editor does not use it's parent height, no matter what i do. How can i create something just like the actual Ace Editor kitchen sink, but using Twitter Bootstrap in a responsive manner (like Cloud9, for example)?

Solution

  • ace uses size of the element to which it is attached you can do either of following