Bootstrap: Bootstrap 4 Dashboard Example + IE10/11 Display Issues

[DaleyKD]

Similar to #25415 .

Windows 10 Enterprise Build 1709

When looking at https://getbootstrap.com/docs/4.0/examples/dashboard, there are a few issues with Internet Explorer.

Internet Explorer 11

1. The navbar-brand does not appear in the upper-left.
2. There is a horizontal scrollbar, and I do not see the entirety of the canvas.
   

If I implement the fix suggested by @PerseusTheGreat, it does appear to help the first issue. Deleting the canvas element fixes my second issue. (For my purposes, I don't need the canvas.)

Internet Explorer 11 in Internet Explorer 10 Document Mode

1. The horizontal scroll is enormous.
   
2. When you scroll all the way over, the Sign out button in the upper-right does not appear, but there is a clickable link.
   

[PerseusTheGreat]

Hi,
In advance, I apologize, I am beginner in English.

Based on my observations, the nav.navbar element has display: flex and the input.form-control.w-100 element has width: 100%.

In normal situation, width: 100% means the input element should fill remaining space between a.navbar-brand and ul.navbar-nav; but, the input sets its width based on html or body width(s).

I think this behavior is based on IE layout engine dysfunction (Can I Use: CSS Flexible Box Layout Module)

[amirsinaa]

Hey,
IE does not support flexbox , you need to override the bootstrap navbar styles and change the display property from 'flex' to something else like 'block' but when you do that you also need to change other navbar related elements properties like search input 'position ,display and width '
because when you change navbar display you will face this :

[Herst]

IE does not support flexbox

IE10/11 (the ones officially supported by BS4) do support it, the implementation is just quite buggy, see https://caniuse.com/#search=flexbox

[DaleyKD]

Based on my observations, the nav.navbar element has display: flex and the input.form-control.w-100 element has width: 100%.

In normal situation, width: 100% means the input element should fill remaining space between a.navbar-brand and ul.navbar-nav; but, the input sets its width based on html or body width(s).

@PerseusTheGreat, completely removing the input element changed nothing, sadly.

Something else I noticed in the markup, and I'm not a bootstrap expert (I just started two days ago), is that the class of the main element is col-md-9. I thought everything was supposed to add up to 12? 9 + 2 = 11, not 12. Setting it to col-md-10 doesn't seem to fix it, but isn't that a mistake?

[PerseusTheGreat]

@DaleyKD
Totally 12; It means sum of all columns widths in every BS screen sizes should be less than or equal to 12; so 9 + 2 is valid layout on medium(col-md-*) screen size.

Please remove <div class="container-fluid"> and all inner contents then try to test nav element again. The problem still exist. I still think it is a browser BUG.

[GeertHuls]

It seems to work after overriding the sidebar's position (relative instead of fixed):

.sidebar {
position: relative;
}

[PerseusTheGreat]

@GeertHuls , Sidebar problem has been solved on #25415 (m... sort of...), now we are challenging to horizontal scrollbar on _IE10_ or _IE11+Document Mode 10_