CODEWITHSUNDEEP
htmlcsscss-grid
S. Schenk
S. Schenk

Reputation: 2150

Unexplained grid row height in IE and Edge

I've edited the CodePen example to add some content to the center div with height on all container div and it is clearly not working please see here:

https://codepen.io/anon/pen/OEBxNr

These lines seem to cause said gap below:

.container {
   ... 
   -ms-grid-rows: 1fr 1fr 1fr;
}

.top {
   ...
   height 8.4rem;
}

But I'm still left with the second below problem which can be seen in the CodePen above.

I have an app container and in it a nav at the top, page in the middle, and footer at the bottom. My layout is working fine in all browsers except IE and Edge.

The below code creates a gap between the second and first rows. The second problem is that the size of the page is stretched far beyond any content. 

body, html {
  height: 100%;
}

.container {
    background:cyan;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: minmax(auto, auto);
    display: -ms-grid;
    -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    -ms-grid-rows: 1fr 1fr 1fr;
    height: 100%;
}

.top {
  background: yellow;  
  height: 8.4rem;
  position: relative;
  z-index: 99;
  grid-column: 1 / span 12;
  grid-row: 1;
  background: pink;
  -ms-grid-column: 1;
  -ms-grid-column-span: 12;
  -ms-grid-row: 1;
}

.mid {
  grid-column: 1 / span 12;
  grid-row: 2;
  min-width: 0;
  background: yellow;
  -ms-grid-column: 1;
  -ms-grid-column-span: 12;
  -ms-grid-row: 2;
  height: 100%;
}

.bottom {
    background: purple;
    -ms-grid-column: 1;
    -ms-grid-row: 3;
    -ms-grid-column-span: 12;
}
<body>
    <div class='container'>
        <div class='top'>TOP</div>
        <div class='mid'>
            <p>some long text some long text some long text some long text</p>
            <p>some long text some long text some long text some long text</p>
            <p>some long text some long text some long text some long text</p>
            <p>some long text some long text some long text some long text</p>
            <p>some long text some long text some long text some long text</p>
            <p>some long text some long text some long text some long text</p>
            <p>some long text some long text some long text some long text</p>
            <p>some long text some long text some long text some long text</p>
            <p>some long text some long text some long text some long text</p>
            <p>some long text some long text some long text some long text</p>
            <p>some long text some long text some long text some long text</p>
            <p>some long text some long text some long text some long text</p>
            <p>some long text some long text some long text some long text</p>
            <p>some long text some long text some long text some long text</p>
            <p>some long text some long text some long text some long text</p>
            <p>some long text some long text some long text some long text</p>
            <p>some long text some long text some long text some long text</p>
            <p>some long text some long text some long text some long text</p>
            <p>some long text some long text some long text some long text</p>
            <p>some long text some long text some long text some long text</p>
        </div>
        <div class='bottom'>
            <p>some short text</p>
        </div>
    </div>
</body>

Upvotes: 7

Views: 2148

Answers (2)

FilmFiddler
FilmFiddler

Reputation: 516

The way the code is currently arranged, all versions of Microsoft browsers which have any support of Grid (and that means legacy-grid IE10-11, legacy-grid Edge HTML12-15 and compliant-grid Edge HTML16 and 17) are receiving the following legacy row declaration: 

-ms-grid-rows: 1fr 1fr 1fr;

Note that the recent compliant versions of Edge understand both the standard and the legacy -ms syntax, so it is important not to put that legacy syntax last. Legacy declarations must go before any standard syntax declarations.

Whereas compliant versions of Firefox, Chrome, etc are all receiving: 

grid-template-rows: minmax(auto, auto);

The minmax() function will handle the unequal contents much better than having a series of 1fr row heights, which appear to be causing the stated problem, so it is a matter of providing minmax() to all browsers for the row declaration. Note that minmax() is basically supported by all those MS legacy browsers, provided it is -ms- prefixed.

Edit: As suggested by Michael_B, it is simpler to just use grid-template-rows: auto, instead of adding minmax(auto, auto).

.container {
  background: cyan;
  display: -ms-grid;
  -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  -ms-grid-rows: auto;
  /* legacy minmax() support */
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto;
}

.top {
  background: pink;
  -ms-grid-column: 1;
  -ms-grid-column-span: 12;
  -ms-grid-row: 1;
  grid-column: 1 / span 12;
  grid-row: 1;
  height: 8.4rem;
}

.mid {
  background: yellow;
  -ms-grid-column: 1;
  -ms-grid-column-span: 12;
  -ms-grid-row: 2;
  grid-column: 1 / span 12;
  grid-row: 2;
}

.bottom {
  background: purple;
  -ms-grid-column: 1;
  -ms-grid-column-span: 12;
  -ms-grid-row: 3;
  grid-column: 1 / span 12;
  grid-row: 3;
}
<div class='container'>
  <div class='top'>TOP</div>
  <div class='mid'>
    <p>some long text some long text some long text some long text</p>
    <p>some long text some long text some long text some long text</p>
    <p>some long text some long text some long text some long text</p>
    <p>some long text some long text some long text some long text</p>
    <p>some long text some long text some long text some long text</p>
    <p>some long text some long text some long text some long text</p>
    <p>some long text some long text some long text some long text</p>
    <p>some long text some long text some long text some long text</p>
    <p>some long text some long text some long text some long text</p>
    <p>some long text some long text some long text some long text</p>
    <p>some long text some long text some long text some long text</p>
    <p>some long text some long text some long text some long text</p>
    <p>some long text some long text some long text some long text</p>
    <p>some long text some long text some long text some long text</p>
    <p>some long text some long text some long text some long text</p>
    <p>some long text some long text some long text some long text</p>
    <p>some long text some long text some long text some long text</p>
    <p>some long text some long text some long text some long text</p>
    <p>some long text some long text some long text some long text</p>
    <p>some long text some long text some long text some long text</p>
  </div>
  <div class='bottom'>
    <p>some short text</p>
  </div>
</div>

The height 100% declaration on the .container has been omitted, as that does appear to force a small horizontal strip of background cyan to appear under the .top in Edge 17 in large screens (but not in most other browsers, including IE).

One other thing to note, just for convenience, is that the action of the repeat() function is supported under a different -ms- legacy syntax. So you could also replace the following: 

-ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;

with 

-ms-grid-columns: (1fr)[12];

See here for the legacy -ms variations on the Grid syntax: https://msdn.microsoft.com/en-us/library/hh673533(v=vs.85).aspx

Upvotes: 6

Dustin Halstead
Dustin Halstead

Reputation: 771

The MID section is aligned at the top in Internet Explorer 11 on my machine -- using both your current CSS or what was originally posted.

enter image description here

However, there is a large amount of padding around the container -- which is a byproduct of browser rendering.

Since every browser and device can potentially apply tiny variances to how things are displayed, it can be extremely helpful, and less frustrating, to normalize the layout before applying any of your own styling.

For the most part, Normalizing is essentially the practice of removing browser presets and defining starting values in order to help standardize how everything is interpreted afterwards.

Here's my personal, normalize.css ...

/* ┌─────────────────────────────────────────────────────────────────┐
/* │   Normalize v1.1                                                │
/* │   Created by Dustin Halstead                                    │
/* └─────────────────────────────────────────────────────────────────┘


/* ┌────────────────────────────────────────────────────────────────┐
/* │   Universal Adjustments                                        │ 

    /* 1. Correct line height in all browsers. */
    /* 2. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS. */
        * {
            padding: 0;
            margin: 0;
            border: 0;
            border-collapse: collapse;
            vertical-align: baseline;
            border-spacing: 0;
            text-decoration: none;
            line-height: 1.15; /* 1 */
            -ms-text-size-adjust: 100%; /* 2 */
            -webkit-text-size-adjust: 100%; /* 2 */
        }

/* └────────────────────────────────────────────────────────────────┘ 


/* ┌────────────────────────────────────────────────────────────────┐
/* │   Sections                                                     │ 

    /* Correct display in IE 9-. */
        article, aside, footer, header, nav, section, figcaption, figure, main { display: block; }

    /* Correct `h1` font size and margin within `section` and `article` areas in Chrome, Firefox, and Safari. */
        h1 { font-size: 2em; margin: 0.67em 0; }

/* └────────────────────────────────────────────────────────────────┘ 


/* ┌────────────────────────────────────────────────────────────────┐
/* │   Grouping                                                     │ 

    /* 1. Correct box sizing in Firefox. */
    /* 2. Show overflow in Edge and IE. */
        hr {
            box-sizing: content-box; /* 1 */
            height: 0; /* 1 */
            overflow: visible; /* 2 */
        }

    /* 1. Correct inheritance and scaling of font size in all browsers. */
    /* 2. Correct odd `em` font sizing in all browsers. */
        pre {
            font-family: monospace, monospace; /* 1 */
            font-size: 1em; /* 2 */
        }

/* └────────────────────────────────────────────────────────────────┘


/* ┌────────────────────────────────────────────────────────────────┐
/* │   Text                                                         │ 

    /* 1. Remove the gray background on active links in IE 10. */
    /* 2. Remove gaps in links underline in iOS 8+ and Safari 8+. */
        a {
            background-color: transparent; /* 1 */
            -webkit-text-decoration-skip: objects; /* 2 */
        }

    /* Correct font weight in Chrome, Edge, and Safari. */
        b, strong { font-weight: bolder; }

    /* Correct the scaling and odd `em` font sizing in all browsers. */
        code, kbd, samp { font-family: monospace, monospace; font-size: 1em; }

    /* Correct font style in Android 4.3-. */
        dfn { font-style: italic; }

    /* Correct font size in all browsers. */
        small { font-size: 80%; }

    /* Prevent `sub` and `sup` elements from affecting the line height in all browsers. */
        sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
        sub { bottom: -0.25em; }
        sup { top: -0.5em; }

/* └────────────────────────────────────────────────────────────────┘


/* ┌────────────────────────────────────────────────────────────────┐
/* │   Embedded Content                                             │ 


    /* Add the correct display in iOS 4-7. */
        audio:not([controls]) { display: none; height: 0; }

    /* Hide overflow in IE. */
        svg:not(:root) { overflow: hidden; }

/* └────────────────────────────────────────────────────────────────┘


/* ┌────────────────────────────────────────────────────────────────┐
/* │   Forms                                                        │

    /* Remove the margin in Firefox and Safari. */
        button, input, optgroup, select, textarea { margin: 0; }

    /* Remove the inheritance of text transform in Edge, Firefox, and IE. */
        button, select { text-transform: none; }

    /* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` controls in Android 4. */
    /* 2. Correct the inability to style clickable types in iOS and Safari. */
        button,
        html [type="button"], /* 1 */
        [type="reset"],
        [type="submit"] {
            -webkit-appearance: button; /* 2 */
        }

    /* Correct the text wrapping in Edge and IE. */
        legend { box-sizing: border-box; display: table; max-width: 100%; white-space: normal; }


    /* Remove the default vertical scrollbar in IE. */
        textarea { overflow: auto; }

    /* Correct the cursor style of increment and decrement buttons in Chrome. */
        [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; }

    /* Correct the odd appearance in Chrome and Safari. */
        [type="search"] { -webkit-appearance: textfield; }

    /* Remove the inner padding and cancel buttons in Chrome and Safari on macOS. */
        [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

    /* Correct the inability to style clickable types in iOS and Safari. */
        ::-webkit-file-upload-button { -webkit-appearance: button; }

/* └────────────────────────────────────────────────────────────────┘


/* ┌────────────────────────────────────────────────────────────────┐
/* │   Interactive                                                  │

    /* Correct display in Edge, IE, and Firefox. */
        details, menu { display: block; }

    /* Correct display in all browsers. */
        summary { display: list-item; }

/* └────────────────────────────────────────────────────────────────┘


/* ┌────────────────────────────────────────────────────────────────┐
/* │   Miscellaneous                                                │

    /* Correct display in IE 9-. */  
        canvas { display: inline-block; }

    /* Correct display in IE. */
        template { display: none; }

    /* Correct display in IE 10-. */
        [hidden] { display: none; }

/* └────────────────────────────────────────────────────────────────┘

Give it a shot and see if it helps improve what you're seeing.

Hopefully, it'll prove to be of some use.

Update:

Realized that the layout was breaking during browser resizing more than the initial rendering.

The problem seems to be a direct result of including: display:-ms-grid;
... as well as a few positioning errors.
In addition, display: flex; needs to be defined in order for the content to flow correctly in the specified div.

.container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    min-width: 270px;
    background:cyan;
    display: grid;
    -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    -ms-grid-rows: 1fr 1fr 1fr;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: minmax(auto, auto);
}

.top {
    min-height: 8em;
    background: pink;
    -ms-grid-column: 1;
    -ms-grid-column-span: 12;
    -ms-grid-row: 1;
    grid-column: 1 / span 12;
    grid-row: 1;
}

.mid {
    min-height: 10em;
    background: yellow;
    -ms-grid-column: 1;
    -ms-grid-column-span: 12;
    -ms-grid-row: 2;
    grid-column: 1 / span 12;
    grid-row: 2;
    display: flex;   
}

.bottom {
    min-height: 5em;
    background: purple;
    -ms-grid-column: 1;
    -ms-grid-row: 3;
    -ms-grid-column-span: 12;
    grid-row: 3;
    grid-column: 1 / span 12;
}

Upvotes: 0

Related Questions