CODEWITHSUNDEEP
javascriptcsshtml
user2970037
user2970037

Reputation: 43

Code editor response window

I am working on a site that is an online code editor. Users can load a page where they can type HTML code, which is then displayed (as web format) in a small frame that represents the compiled webpage.

The frame that the HTML is rendered in looks like this:

#responseWindow {
    width: 100%;
    height: 200px;
    background-color: white;
    margin-top: 30px;
    margin-bottom: 30px;
    overflow: auto;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 10px;
    padding-bottom: 10px;
}

The Javascript which transfers the code from the editor to the responseWindow looks like this:

editor.getSession().on('change', function() {
     document.getElementById('responseWindow').innerHTML = editor.getValue();
});

Usually everything typed stays within that frame, but if the user gives a div fixed positioning, then the text does not stay within the frame and appears somewhere else on the page. For example:

<p style="top: 100px; right: 10px;">Hello world</p>

Then the text Hello World is not in the frame. My question is how can I make some type of independent space for the code to render in? How can I make my users code render in a box/frame so they can preview what it looks like?

Upvotes: 1

Views: 71

Answers (1)

Matthew Rapati
Matthew Rapati

Reputation: 5696

Set #responseWindow to position: relative

Positioned elements are relative to their closest positioned ancestor. Right now your #responseWindow's position is static, which is not considered to be "positioned".

Upvotes: 1

Related Questions