CODEWITHSUNDEEP
javascriptjqueryhtmlcsscodemirror
Ratnesh
Ratnesh

Reputation: 1700

Fit the input/output div box size according to the browser

I am following the link https://www.tutorialrepublic.com/codelab.php?topic=faq&file=css-make-two-divs-side-by-side-with-the-same-height to make two div box. I have updated the approach suggested by https://stackoverflow.com/a/54632850/10220825 . Initially it is 50% ratio to both div box size. After submitting the form it is not coming 50% ratio. See below output after submitting the form.

.flex-container{ width:100%;min-height: 650px;}
textarea {
  width: 100%;
  height: 100%;
}

Also I am using codemirror textarea editor inside these div box i.e 

<div class="flex-container">
     <div class="column">   
          <textarea id="editor" ></textarea>
          <script>
            var cm = CodeMirror.fromTextArea(document.getElementById('editor'),{mode:"text/x-java",lineNumbers:true})           
            //cm.setSize("800", "500");</script>
       </div> 
     <div class="column bg-alt">
            <textarea id="editor2" ></textarea> 
            <script>
                var cm2 = CodeMirror.fromTextArea(document.getElementById('editor2'),{
                mode:"text/x-java"  });
                //cm2.setSize("800", "500")             
            </script>
    </div>
</div>

How to make my both div box size or codemirror textarea sizes fixed with the browser/desktop screen after the form submitted

Upvotes: 0

Views: 180

Answers (1)

jleggio
jleggio

Reputation: 1286

Using your example code you could try the following, but you'll have to remove the hard height and width you're setting on your textarea elements.

CSS

body, html{
  margin:0px;
  height:100%;
}
.flex-container {
  width: 100%;
  min-height:100%;
  margin: 0 auto;
  display: -webkit-flex;
  display: flex;
}
.flex-container .column {
  background: #dbdfe5;
  -webkit-flex: 1
  -ms-flex: 1
  flex: 1;
}
.flex-container .column.bg-alt {
  background: #b4bac0;
}
textarea {
  width: 100%;
  height: 100%;
}

The key is to make the page height 100% along with the flex container. Here's a code pen if you wanna see it in action.

Upvotes: 1

Related Questions