CODEWITHSUNDEEP
htmlcsssass
Tanzeel
Tanzeel

Reputation: 5008

How to get scroll in IE 11

It's a CSS issue. I'm trying to get scroll if labels are overflowing. The problem is with Internet Explorer only and not with Firefox and Chrome. I checked this question: overflow-y scroll not working in IE 11.

Here's the screenshot from Firefox:

layout in Firefox

But this is not working for IE 11:

layout in IE

This is my scss:

.pt-tokens>ul.pt-token-list {
    padding: 10px 0px 10px 0px;
    font-size: $font-size-16;
    line-height: 22px;
    max-height: $height-active-filters-tokens-cont;
    min-height: $height-active-filters-tokens-cont;
    max-width: 100%;
    background-color: $color-gray-245;
    outline: none;
    overflow: scroll;
   -ms-overflow-style: -ms-scrollbar;
}

This is DOM Explorer of IE 11:

DOM in IE11

I tried many solutions. I've also tried:

  1. -ms-overflow-style: -ms-autohiding-scrollbar;
  2. -ms-overflow-style: scrollbar;

.fruit-wrapper {
  padding: 10px 0px 10px 0px;
  font-size: 16px;
  line-height: 22px;
  max-height: 50px;
  min-height: 50px;
  max-width: 100%;
  background-color: green;
  outline: none;
  overflow: auto;
}
<div class="fruit-wrapper">
  <ul>
    <li>
      Apple
    </li>
    <li>
      Bananna
    </li>
    <li>
      Mango
    </li>
    <li>
      Grape
    </li>
    <li>
      Orange
    </li>
  </ul>
</div>

Upvotes: 1

Views: 338

Answers (1)

Hybrid
Hybrid

Reputation: 7049

This happens a lot because of spacing discrepancies between various browsers. Some may need scroll bars, while others may not (which can cause the bar to obstruct certain items).

Try using overflow: auto; to show the bar only when necessary.

Upvotes: 2

Related Questions