I've encountered a strange issue with my list item in Internet Explorer. Despite working perfectly in Chrome and other browsers, it fails to function properly in IE. I've built this application using the Vue framework and have faced various problems with IE that I managed to resolve. However, this particular issue seems unique to me as I haven't come across anyone else experiencing it.
Strangely, after selecting an item from the list, it starts working as expected. But upon the initial page load, the list appears distorted as shown in the images above. Moreover, the list refuses to scroll in IE until an item is selected.
Below is the CSS code for the list:
ul{
background-color: white;
padding-top:10px !important;
padding-bottom: 10px !important;
height: 100%;
max-height: 450px;
overflow: auto;
}
Here's the scrollbar code that functions well in other browsers:
.col-4, .col-8{
padding:0;
overflow: hidden;
overflow-y: -moz-hidden-unscrollable;
}
html{
-ms-overflow-style: -ms-autohiding-scrollbar;
}
@-moz-document url-prefix() {
.list-group{
margin-right: -16px;
}
}
::-webkit-scrollbar {
display: none;
}
I would greatly appreciate any assistance with this issue.