Bootstrap: Utilities 'ml-auto' and 'mr-auto' cause navbar components to overflow the navbar

[raymondelooff]

In IE10, the 'ml-auto' and 'mr-auto' utilities cause the navbar components to overflow the navbar. As far as I tested this only happens in IE10. This is probably due to a IE10 browser bug.

Strange enough the first toggler example works fine.

OS: Windows 7 (VM)
Browser: IE10

You can see the bug when visiting the navbar documentation with IE10: https://v4-alpha.getbootstrap.com/components/navbar/.

[chrismbarr]

Same thing happening for me in IE10 & IE11 with a modal-footer. Works fine in Edge 14 though.

IE11

Relevant HTML:

<div class="modal-footer">
        <button class="btn btn-sm btn-outline-danger mr-auto align-self-end" type="button" ng-click="$ctrl.confirmDelete()">
        <span class="fa fa-trash"></span>
        Delete this test
    </button>
    <button class="btn btn-secondary" type="button" ng-click="$ctrl.dismissModal()">
        Close
    </button>
    <button class="btn btn-success" type="button" ng-click="$ctrl.save()">
        <span class="fa fa-check"></span>
        Save Changes
    </button>
</div>

This is how it should look, this is from Chrome 56

[MisterY]

Not sure if this is the same thing, but adding a right-aligned item in the navbar, by using mr- or ml-auto throws the right item off the screen.

Note that only the icon is visible while there is a dropdown with text to the right of it.
This is IE11. Everything works perfectly in FF & Chromium-based browsers.

Edit: It seems that the size calculated by -auto is a bit too big in IE. Adding additional elements works as they will come into the view.

The behaviour changes when switching (in dev tools) between 10 and Edge. With Edge settings, everything works fine, with 10 there is a problem.

[mdo]

Judging by some of the descriptions here and at https://github.com/philipwalton/flexbugs, this is a flex bug only in IE 10. I haven't found the exact fix yet, but I feel like this is a fixable issue.

[raymondelooff]

I think I have found the cause of the issue. The '.navbar-collapse' element had a width of 100%, declared on this line (at the moment of writing, this line is now gone). When the collapse element is placed next to an item with 'display: inline-block', in most cases the navbar brand, IE10 doesn't take that element into account when calculating the width of the collapse element.

The following screenshot shows the outlines of the '.navbar-collapse' element. The navbar brand is placed next to the collapse element.

After I replaced 'width: 100%' with 'flex: 1 1 auto', the width was calculated correctly in IE10 and other browsers.

It appears that this issue has nothing to do with the margin utilities. As the navbar examples from the docs are not working due to the recent navbar changes and the fact that the line that caused this issue is now gone, I can't reproduce the issue on the latest development version. I can check whether this issue still exists when the examples are fixed 😀

[mdo]

Should be fine in v4-dev.

[mheptinstall]

Latest v4-dev still has issue with mr-auto in a modal-footer in IE11 https://jsfiddle.net/8mt7qk7u/3/

[mdo]

@mheptinstall There's only so much we can do. See the link under this section of the docs: http://getbootstrap.com/docs/4.0/utilities/flex/#auto-margins.