Make the code-mirror block fill the rest of the page in Safari

Question

I want to make a page that satisfies the following conditions:

it contains some texts in the first part and a code-mirror in the second part
the texts in the first part are almost fixed (so their height is almost fixed), and I want the height of the code-mirror to fill exactly the rest of the page. If there are many texts in the code-mirror, then use scroll.

Then, I make this plunker:

<style>
    .rb {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .rb .CodeMirror {
        flex: 1;
    }
</style>

<div class="rb">
    1<br/>2<br/>3<br/>4<br/>
    <textarea ng-model="body" ui-codemirror="option"></textarea>
</div>

It works perfectly in Chrome, it however does not work in Safari: the height of the code-mirror is incorrect; we see immediately the problem:

Does anyone know how to fix this? I used to have a solution with calc(minus a fixed px), but I cannot find it anymore.

I don't have Safari so can't make an immediate test, though this sample should work: https://plnkr.co/edit/zCdU7Tn2rfvirXnD0kHM?p=preview — Asons, Jul 30 '17 at 07:44
@LGSon it does not work in Safari, the layout is the same as what I posted... This question is not easy... — SoftTimur, Jul 30 '17 at 17:39
Your `rb` class has a height set, `height: 100%`, and for an element with a percent based height, all its ascendants need `height: 100%` too, the ``, the `
`, `` and `` ... or change `rb`'s height to viewport units, i.e. `height: 100vh` — Asons, Jul 31 '17 at 06:16
@LGSon Previously, I posted a similar question, nobody had a perfect solution... If you think your idea works, please provide a working example... — SoftTimur, Jul 31 '17 at 07:03
Since I can't verify if what I suggest works by itself, I chose to post a comment only, simply telling what I do know needs to be fixed. There might be additional issues, though can't _follow up_ on them as I don't have Safari. — Asons, Jul 31 '17 at 07:19

score 0 · Answer 1 · answered Aug 02 '17 at 03:17

It would like to give question a try.

You may want to use em instead of vh.

1em = approx 16px

Also from what I read from w3schools: https://www.w3schools.com/cssref/css3_pr_flex.asp

You will need to also import the browser property. I am guessing the correction should be:

    <style>
    // just in case you didn't
    <!--
    html,body{
        height: 100%; // or 100vh
    }
    -->
    .rb {
        display: -webkit-flex; // for Safari
        display: flex;
        -webkit-flex-direction: column;
        flex-direction: column;
        // remove this height: 100%;
        // otherwise should set 100vh to height
    }

    .rb .CodeMirror {
        // You may want to try auto instead of 1. 
        // As the size of the chrome for each browser is different.
        -webkit-flex: 1; // for Safari
        -ms-flex: 1; // for IE
        flex: 1;
    }
</style>

<div class="rb">
    1<br/>2<br/>3<br/>4<br/>
    <textarea ng-model="body" ui-codemirror="option"></textarea>
</div>

Please let me know if it works or not. thanks!

Kostas Siabanis · Accepted Answer · 2017-08-03T06:11:37.363

0

Why don't you use height: 100% instead of flex: 1?

.rb .CodeMirror {
  height: 100%;
}

Update:

For the sake of future users, the above didn't work, but with calc it did for both Safari and Chrome, so:

.rb .CodeMirror {
  calc(100% - 80px); /* notice the spaces around "-" */
}

where 80px is the height of the "first part" as described in the original post.

Plunker

edited Aug 03 '17 at 06:11

answered Aug 02 '17 at 17:46

Kostas Siabanis

2,989
2
20
22

I updated my answer with a fork from your plunker, please check it out. – Kostas Siabanis Aug 02 '17 at 17:53
It works well in Chrome. However, in Safari, if you do new line in the code-mirror, you will realise that several lines are hidden in the bottom; we need to add several lines to see the scroll bar. I have seen this before, and I had a solution with `calc`, but I could not found it... – SoftTimur Aug 02 '17 at 17:56
Actually I tested it on Safari, I have attached a screenshot from Safari 10.1.2, maybe something else is the problem? – Kostas Siabanis Aug 02 '17 at 18:02
Btw, if you need to use calc you are probably looking for something like this: height: calc(100vh - fixed-height-of-first-part); – Kostas Siabanis Aug 02 '17 at 18:04
click on the last row of the code-mirror, and keep clicking "enter" to add new lines until you see the scroll bar: some lines will be hidden in the bottom... – SoftTimur Aug 02 '17 at 18:04
Maybe it is a bug of Safari, check [here](https://stackoverflow.com/a/43972468/702977)... So I am looking for some workarounds... – SoftTimur Aug 02 '17 at 18:11
I tried something, can you check the plunk again and let me know? – Kostas Siabanis Aug 02 '17 at 18:15
Even more lines are hidden in Safari... but `calc` is a good direction... – SoftTimur Aug 02 '17 at 18:17
Glad it helped. I will update my answer with the calc solution for the sake of future readers. – Kostas Siabanis Aug 02 '17 at 18:29
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/150859/discussion-between-kostas-siabanis-and-softtimur). – Kostas Siabanis Aug 02 '17 at 18:36
`calc(100% - 80px)` works for me so far in both Chrome and Safari (note that it is important to add space around `-`, as `calc(100%-80px)` will not work)... Thank you... – SoftTimur Aug 03 '17 at 06:06
Here is [a simplified JSBin version](https://jsbin.com/vewihetiri/6/edit?html,output) as a record... – SoftTimur Aug 11 '17 at 20:11

Make the code-mirror block fill the rest of the page in Safari

2 Answers2

Linked