Size inside flexbox

1

Hi,

I’m trying to get CodeMirror widget size following a flexbox layout, so stretching with window is resizing, but I don’t want thet the widget resizes itself when I add text inside.
If I put a fixed size on widget (i.e. 470 px) it doesn’t stretch with window resize, and when I type on editor the scrollbars appears correctly.
If I put 100% size on widget it DOES stretch with window resize but then when I type text inside itl grows without scrollbars, which I don’t want to happen.

Is there a solution for it ?

2

I think an additional wrapper element with 100% width around the editor will help. See https://github.com/codemirror/CodeMirror/issues/4142

3

I have this one :
< div class = “codeArea”>
< textarea id=codeArea>
< /textarea>
< /div>

and this one :

.codeArea {
height:100%;
}

and this one :

.CodeMirror {
height:100%;
}

But the problem is still there. I tried many combination of width on both containers, but nothing… If I get it resizing with window, it also resizes typing, with no scrollbars. When I manage to get the scrollbars it stops resizing with window.

What I’m trying to have is a single-page IDE with fixed relationship between widgets. The page should NEVER expand (I don’t want the scrollbars on it) changing editor contents, and the editor should have the size set by flex layout, and not fixed by me.

4

As I can see, if I put

.CodeMirror {
height:100%;
}

The widget resizes itself with layout, but also grow when typing inside it; if I remove the height it will take a fixed height and NOT resize both when resizing window and when typing inside, no matter of the parent container settings.

5

Got it (finally!) like this :

.codeArea {
flex:1 1 auto;
margin-top:0;
height:100%;
position:relative;
}

.CodeMirror {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
height:100%;
}

codeArea is the containing DIV. I had to set BOTH absolute positioning, corner positions AND 100% height to have it working.

3 Likes
6

It’s work for me too. thanks :slightly_smiling_face: