CODEWITHSUNDEEP
htmlcssinternet-explorermicrosoft-edge
AbdelElrafa
AbdelElrafa

Reputation: 891

css max-height seems to not work for IE Edge browser

I'm trying to create a floating div on the page, it seems to work perfectly on all browsers except for IE & Edge. I tried to google it and see if someone had a work around, but couldn't find one. Here is the fiddle for you to try in Chrome and then try in Edge or IE - https://jsfiddle.net/ov02Lkja/

HTML - 

<div id="tracking-products-container" style="display: table;">
  <div class="tracking-products-inner">
    <div class="tracking-products-wrapper">
      <table>
        <thead>
          <tr>
            <th>
              <input class="check-all-tracking-products" type="checkbox">
            </th>
            <th>Item</th>
            <th>&nbsp;</th>
            <th>Quantity Shipped</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              <input name="tracking_products[]" type="checkbox" value="54">
            </td>
            <td></td>
            <td class="cell-name">Something</td>
            <td>
              <input name="tracking_quantity[54]" type="number" value="384">
            </td>
          </tr>
          <tr>
        </tbody>
      </table>
    </div>
    <div class="tracking-products-bottom"><a class="button button-primary" id="tracking-products-save">Select Products</a></div>
  </div>
</div>

CSS - 

.tracking-content .tracking-products {
  margin-top: 10px;
  background: #e1e1e1;
  width: 100%;
  table-layout: fixed;
  text-align: left;
}

.tracking-content .tracking-products th {
  background: #fff;
}

.tracking-content .tracking-products td {
  background: #fff;
}

.tracking-content .tracking-products td,
.tracking-content .tracking-products th {
  padding: 5px;
}

#tracking-select-products {
  margin-right: 3px;
}

#tracking-products-container {
  background: rgba(0, 0, 0, 0.85);
  position: fixed;
  display: table;
  top: 0;
  right: 0;
  z-index: 1000000;
  width: 100%;
  height: 100%;
}

.tracking-products-inner {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  max-width: 500px;
}

.tracking-products-wrapper {
  max-width: 500px;
  margin: 0 auto;
  overflow-y: scroll;
  max-height: 70%;
  background: #fff;
  padding: 15px;
}

.tracking-products-wrapper table {
  width: 100%;
}

.tracking-products-wrapper table thead {
  background: #eee;
}

.tracking-products-wrapper table thead th {
  padding: 5px;
}

.tracking-products-wrapper table td.cell-name {
  text-align: left;
}

#woocommerce-shipment-tracking .tracking-products-wrapper input[type="checkbox"] {
  width: auto;
}

.tracking-products-bottom {
  background: #fff;
  padding: 15px;
  margin-top: 10px;
  max-width: 500px;
  margin: 0 auto;
  text-align: right;
}

Upvotes: 5

Views: 6142

Answers (2)

Mike Denton
Mike Denton

Reputation: 1

I also encountered this issue and had some luck using viewport height units rather than percentage.

Rather than: max-height: 70%;

I used: max-height: 70vh;

Although this is based off the height of the viewport rather than the height of the parent container.

Upvotes: 0

AbdelElrafa
AbdelElrafa

Reputation: 891

It seems that IE and Edge don't support/work with % values. I had to set a max-height of 500px for those browsers. Very disappointing. 

@supports (-ms-accelerator:true) {
    .tracking-products-wrapper {
      max-height: 500px !important;
    }
}

Upvotes: 5

Related Questions