CODEWITHSUNDEEP
cssresizemicrosoft-edgecss-grid
Shasta Kota
Shasta Kota

Reputation: 256

Why does CSS Grid element width not resize on auto-flow: column in MS Edge?

TL;DR

This code works in Chrome, but not MS Edge https://angular-ysqrgh.stackblitz.io/ because the grid container width does not change in MS Edge

Context

I'm trying to add a button container on the right side of my page for a map tool. Imagine buttons like zoom in, zoom out, etc. Due to the rest of the UI, it has to be positioned there.

There are several different types of button groups that will all go inside this button container. In my example, I've differentiated between the groups by marking them with a + or -.

Desired behavior

Each button group is defined as a display: grid. The behavior I'm looking for is that when the screen is tall enough in height, all buttons are displayed. If the height is not small enough to display them all, each group will wrap excess buttons onto another column, with a minimum amount of 2 rows (as many columns as necessary).

Additionally, I want each grid to take up only as much height as it has content, not take expand to the whole parent's height (which is why I'm not using flex-grow).

This is an example of what I want https://angular-ysqrgh.stackblitz.io/ It works in Chrome, but not in Edge. Note: I mirrored the elements on the left-hand side just for reference in this example.

What I think is the cause

MS Edge seems to have a problem when using this grid-auto-flow: column behavior. I did a test with rows and columns reversed, and MS Edge seems to be able to resize widths and heights just fine in that mode https://angular-mzvgjm.stackblitz.io so I feel like the problem has to do with how MS Edge handles the grid-auto-flow property.

In this 'row' example, I did have a problem with getting it to lay out all the buttons in a single row when expanded... Maybe related to the problem I'm having with the column layout but I'm not seeing the solution.

Is there any way to achieve the behavior I'm looking for?

EDIT1: Here's the code featured in the Stackblitz link...

HTML

<div id="map-controls-container">
  <div id="map-navigation-controls" class="map-controls-style">
    <button type="button" class="btn">+</button>
    <button type="button" class="btn">+</button>
    <button type="button" class="btn">+</button>
    <button type="button" class="btn">+</button>
    <button type="button" class="btn">+</button>
    <button type="button" class="btn">+</button>
    <button type="button" class="btn">+</button>
    <button type="button" class="btn">+</button>
    <button type="button" class="btn">+</button>
    <button type="button" class="btn">+</button>
    <button type="button" class="btn">+</button>
    <button type="button" class="btn">+</button>
  </div>

  <div id="map-selection-controls" class="map-controls-style">
    <button type="button" class="btn">-</button>
    <button type="button" class="btn">-</button>
    <button type="button" class="btn">-</button>
  </div>
</div>

<div id="map-controls-container2">
  <div id="map-navigation-controls" class="map-controls-style">
    <button type="button" class="btn">+</button>
    <button type="button" class="btn">+</button>
    <button type="button" class="btn">+</button>
    <button type="button" class="btn">+</button>
    <button type="button" class="btn">+</button>
    <button type="button" class="btn">+</button>
    <button type="button" class="btn">+</button>
    <button type="button" class="btn">+</button>
    <button type="button" class="btn">+</button>
    <button type="button" class="btn">+</button>
    <button type="button" class="btn">+</button>
    <button type="button" class="btn">+</button>
  </div>

  <div id="map-selection-controls" class="map-controls-style">
    <button type="button" class="btn">-</button>
    <button type="button" class="btn">-</button>
    <button type="button" class="btn">-</button>
  </div>
</div>

SCSS

.btn {
    border-radius: 0.15rem;
    background-color: #4caf50;
    color: #fff;
    cursor: pointer;
    user-select: none;
    text-align: center;
    white-space: nowrap;
    font-size: 1rem;
    border: 1px solid #4caf50;
    margin: 0;
}
#map-controls-container {
  left: 0;
}
#map-controls-container2 {
  right: 0;
}
#map-controls-container,
#map-controls-container2 {
    position: absolute;
    top: 0;
    background-color: #0000ff;
    display: inline-flex;
    flex-direction: column;
    min-height: 172px;
    height: 100%;

    .map-controls-style {
        min-height: 86px;
        max-height: 100%;
        display: grid;
        background-color: #1b5e20;
        grid-template-rows: repeat(auto-fit, 40px);
        align-content: space-around;
        grid-gap: 2px;
        padding: 2px;
        grid-auto-flow: column;
        grid-auto-columns: 40px;

        button {
            background-size: 100% 100%;
            background-origin: content-box;
            background-position: center center;
            width: 40px;
            height: 40px;
            padding: 0;
        }
    }
}

EDIT2: Just to clarify, I'm looking for a CSS answer to this problem. I've managed to get the desired results for now by subscribing to the window resize event and manually calculating a new width using Typescript.

Upvotes: 2

Views: 1523

Answers (1)

Thomas Goodyear
Thomas Goodyear

Reputation: 91

This is probably because IE and Edge are very iffy when it comes to CSS Grid, I've spent the best part of today trying to fix my entire codebase because it doesn't work on MS Browsers :(

All you should need to do to fix it is add the -ms-grid equivalents of the CSS Grid stuff you've got in your css. Like this:

.btn {
    border-radius: 0.15rem;
    background-color: #4caf50;
    color: #fff;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    text-align: center;
    white-space: nowrap;
    font-size: 1rem;
    border: 1px solid #4caf50;
    margin: 0;
}
#map-controls-container {
  left: 0;
}
#map-controls-container2 {
  right: 0;
}
#map-controls-container,
#map-controls-container2 {
    position: absolute;
    top: 0;
    background-color: #0000ff;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    min-height: 172px;
    height: 100%;

    .map-controls-style {
        min-height: 86px;
        max-height: 100%;
        display: -ms-grid;
        display: grid;
        background-color: #1b5e20;
        grid-template-rows: repeat(auto-fit, 40px);
        -ms-flex-line-pack: distribute;
            align-content: space-around;
        grid-gap: 2px;
        padding: 2px;
        grid-auto-flow: column;
        grid-auto-columns: 40px;

        button {
            background-size: 100% 100%;
            background-origin: content-box;
            background-position: center center;
            width: 40px;
            height: 40px;
            padding: 0;
        }
    }
}

A really useful tool for coverting CSS Grid to -ms-grid and loads of other stuff is Autoprefixer

Please let me know if it worked :)

Upvotes: 0

Related Questions