The CSS property "overflow: scroll" does not seem to be working properly to display a scroll bar in Internet Explorer 11

When viewed in IE 11, the UI does not show a scroll bar

In Chrome, the UI displays a scroll bar

The CSS code is as follows: 

.r-listbox {  
            overflow:scroll;
            width: 200px;
            display: table-cell;
            min-height: 1px;
            padding-left: 10px;
            margin-left: 200px;
            margin-top: -10px;            
        }

.r-listbox 
{
  -ms-overflow-style:scrollbar;
  overflow:scroll;
  width: 200px;
  display: table-cell;
  min-height: 1px;
  padding-left: 10px;
  margin-left: 200px;
  margin-top: -10px; ``           
}

I have made adjustments, but the scroll still does not display in IE 11. https://i.sstatic.net/GQhQu.png

cssinternet-explorer

Answer №1

If you're tasked with creating cross-browser CSS for Internet Explorer, the code should resemble this:

.r-listbox {
    -ms-overflow-style: scrollbar;
    overflow: scroll;
    width: 200px;
    display: table-cell;
    min-height: 1px;
    padding-left: 10px;
    margin-left: 200px;
    margin-top: -10px;            
}

For more information, refer to this link:

https://msdn.microsoft.com/en-us/library/hh771902(v=vs.85).aspx

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to retrieve the content from an element embedded within a hyperlink using Python

Looking for a simple script that can be used to input a URL and extract the text of a specific HTML element on the page. For instance, if I input the URL , I would like to retrieve the "Position" value, which is CB in this example, and display it on my pag ...

javascriptpythonhtmlcss

When an li element is styled with a width of 50% and floated to the left, it does not display the bullet points

When attempting to create a 2-column list, I implemented the following CSS: ul { overflow: hidden; } ul li { float: left; width: 50%; } However, I noticed that when I have 2 items in the list, the one on the right displays a list bullet while th ...

htmlcss

Why is my image not being positioned randomly, even though the random function is functioning correctly?

I've been attempting to create a matching game, where images are randomly positioned on the left and right sides. Despite using the random function, which is functioning correctly (confirmed with console.log), my images are not appearing in a random o ...

javascripthtmlcssrandom

Combine a variable and a string to create a new variable

@color-purple: "#ffffff" @colors: purple, light-purple, green, light-green, red, light-red, grey, light-grey, lightest-grey; .ColorsMixin(@i:0) when(@i =< length(@colors)){ //loop over icons array @color: extract(@colors, @i); //extract the ic ...

cssless

Is it true that SASS is unable to compile variables within the filter: dropshadow() function?

I have integrated a SASS compiler into my Node.js environment for my React project (https://www.npmjs.com/package/sass). I am reusing SCSS files from another project stored in my CMS, which compiles SCSS as well. However, I encountered an error when attem ...

cssnode.jssassscss-mixinscss-filters

How can we ensure that specific criteria are displayed once a selection is made?

Users have multiple options to choose from. When a user selects one option, I want to display additional options that are dependent on the initial selection. For example, if the user can select between 1 or 2 gates, upon choosing a number I will show all t ...

phpjqueryhtmlcss

How to Emphasize Html Select Element on Mobile Devices?

Is there a way to make the HTML select element on Android appear more distinguishable as a dropdown list, rather than just looking like plain text? Any suggestions for highlighting it so users can easily identify and select an option from this element? Up ...

androidhtmlcss

Tips for adjusting the dimensions of an SVG background within an element using the gulp-svg-sprite npm package

My current project involves the use of an NPM package called gulp-svg-sprite, which consolidates all my SVG images into a single file named sprites.svg and also generates sprites.css. Within the sprites.css file, there are CSS classes that define their ba ...

htmlcsssvggulp

JavaScript's addition of CSS animation not functioning as intended

I am facing an issue with a web page utilizing Bootstrap 5. The webpage consists of one element stacked on top of another. My goal is to fade-out the top element after a certain period. Here is what I have tried: HTML <div id="host" class=&qu ...

css

Are there any reliable sources for a complete list of browser CSS properties?

Is there a way to easily access a comprehensive list of CSS properties supported by specific browsers, particularly IE8? Any suggestions on where I can find this information? ...

htmlinternet-explorercssbrowser

Modifying the attributes/properties within a class of a bootstrap button

Here is the code that I have: <b-button id="search-button" size="md" class="mt-1 w-100" type="submit" @click="someEvent()" >Example </b-button If we imagine calling someEvent() and wanting to modi ...

javascriptcssvue.jsbootstrap-4bootstrap-vue

Are there any options available for customizing the animation settings on the UI-bootstrap's carousel feature?

If you're interested in seeing an example of the standard configuration, check out this link. It's surprising how scarce the documentation is for many of the features that the UIB team has developed... I'm curious if anyone here has experie ...

javascriptcssangularjsangular-ui-bootstrapcss-animations

Steps for creating a horizontal card design

Looking to achieve a card style similar to this: http://prntscr.com/p6svjf How can I create this design to ensure it remains responsive? <div class="recent-work"> <img src="work/mercedes.png"> <h3>Modern website concept</h3&g ...

htmlcss

positioning two text sections on the left side of an image

I am attempting to create a page layout with text that should look like this: Team Name My Team Name +-------------+ Division Team Division| | Current Ranki ...

htmlcss

The dropdown menu vanishes from sight as soon as the cursor moves away from a link

Recently, I encountered an issue while trying to create a dropdown menu using Jquery. The problem arose when attempting to select the second link, as the entire menu would disappear. Additionally, is there a way to ensure that only one dropdown menu is vis ...

javascriptjquerycsshtml

Creating Bootstrap carousel indicators within a navbar can enhance the user experience and navigation of

I have a well-functioning carousel that slides perfectly between each image, but I am looking to highlight the active item when sliding and clicking on the navbar menu links. Can anyone point me in the right direction with this? HTML CODE: <nav class= ...

jqueryhtmlcsstwitter-bootstrap

Methods for Expanding a Div within an Oversized Row, Despite Height Constraints

I have a situation where I need to adjust the height of a cell in a table. One of the cells contains a larger element that causes the row to expand vertically. I also have another cell with a div element set to 100% of the cell's height. However, I wa ...

htmlcss

What is the best way to customize media queries in a child theme?

Is it possible to override a media query in my Wordpress child theme? Currently, the media query is set at max-width: 1024px, but I would like it to be triggered at a smaller size, maybe around 700px. The issue arises when attempting to create a new media ...

csswordpresswordpress-themingmedia-queries

Bootstrap failing to apply custom CSS styles

I'm fairly new to Bootstrap and I'm currently working on creating a basic blog within my Django project. It seems that my custom CSS is not functioning properly alongside Bootstrap's, and adding inline styles to each element is proving to be ...

htmlcssdjangobootstrap-4

Ways to resolve the vertical alignment issue between the title and content within an adjustable div box

Clicking the 'add image' button on the left adds a div with 2 draggable and resizable <p> elements into a container. The first <p> is the Title (Titre) and the second <p> contains the content of the div. Below is the code : ...

javascriptjqueryhtmlcss