Bootstrap: .ml-auto class is bugged on IE10 in navbar

[AdrianKuriata]

Hi, i checked page wiht BS4 on IE 10, windows 10. I added .ml-auto to .navbar-nav and this is floated to right, navbar is not visible, i needed change .nabvar-collapse to max-width: 60% for good display navigation.

This is code for navigation:

<!-- Navigation -->
<nav class="navbar fixed-top sticky-top navbar-expand-lg navbar-light nav-font-size bg-light">
    <div class="navbar-brand-desktop d-none d-lg-block">
        <a class="navbar-brand" href="#">
            <img src="images/firm-glogow-ulotka-logo-glowna.png" alt="Ulotki na Tablica Głogów" class="img-responsive" />
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>

    <div class="navbar-brand-mobile d-block d-lg-none w-100">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="show-navbar-search float-right">
            <a class="btn btn-link color-green">
                <i class="fa fa-search" data-toggle="tooltip" data-placement="bottom" data-title="Wyszukaj"></i>
            </a>

            <div class="show-navbar-search-content">
                <input type="text" name="search" placeholder="Wpisz nazwę firmy lub branży" class="form-control search-navbar-form-control" />
            </div>
        </div>
        <div class="show-navbar-search float-right">
            <a class="btn btn-link color-green">
                <i class="fa fa-sort-alpha-asc" data-toggle="tooltip" data-placement="bottom" data-title="Sortuj wyniki"></i>
            </a>

            <div class="show-navbar-search-content">
                <select name="sort" class="form-control custom-select search-navbar-form-control">
                    <option selected>Wybierz sortowanie</option>
                    <option value="1">Wg tytułu rosnąco</option>
                    <option value="2">Wg tytułu malejąco</option>
                    <option value="3">Wg dodania rosnąco</option>
                    <option value="4">Wg dodania malejąco</option>
                </select>
            </div>
        </div>
    </div>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <a class="nav-link color-green" href="#">O projekcie</a>
            </li>
            <li class="nav-item">
                <a class="nav-link color-green" href="#">Nowości</a>
            </li>
            <li class="nav-item">
                <a class="nav-link color-sand font-weight-bold" href="#">Dodaj ulotkę</a>
            </li>
            <li class="nav-item">
                <a class="nav-link color-green" href="#">Współpraca</a>
            </li>
            <li class="nav-item">
                <a class="nav-link color-green" href="#"><i class="fa fa-sign-in d-none d-lg-block" data-toggle="tooltip" data-placement="bottom" data-title="Logowanie"></i> <span class="d-lg-none">Logowanie</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link color-green" href="#"><i class="fa fa-envelope d-none d-lg-block" data-toggle="tooltip" data-placement="bottom" data-title="Kontakt"></i> <span class="d-lg-none">Kontakt</span></a>
            </li>
            <li class="nav-item d-lg-none">
                <a class="nav-link color-green" href="#"><i class="fa fa-facebook d-none d-lg-block" data-toggle="tooltip" data-placement="bottom" data-title="Zobacz nas na Facebooku"></i> <span class="d-lg-none">Facebook</span></a>
            </li>
            <li class="nav-item d-none d-lg-block">
                <div class="show-navbar-search">
                    <a class="btn btn-link color-green">
                        <i class="fa fa-search" data-toggle="tooltip" data-placement="bottom" data-title="Wyszukaj"></i>
                    </a>

                    <div class="show-navbar-search-content">
                        <input type="text" name="search" placeholder="Wpisz nazwę firmy lub branży" class="form-control search-navbar-form-control" />
                    </div>
                </div>
            </li>
            <li class="nav-item d-none d-lg-block">
                <div class="show-navbar-search">
                    <a class="btn btn-link color-green">
                        <i class="fa fa-sort-alpha-asc" data-toggle="tooltip" data-placement="bottom" data-title="Sortuj wyniki"></i>
                    </a>

                    <div class="show-navbar-search-content">
                        <select name="sort" class="form-control custom-select search-navbar-form-control">
                            <option selected>Wybierz sortowanie</option>
                            <option value="1">Wg tytułu rosnąco</option>
                            <option value="2">Wg tytułu malejąco</option>
                            <option value="3">Wg dodania rosnąco</option>
                            <option value="4">Wg dodania malejąco</option>
                        </select>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</nav>

[Johann-S]

Bug reports must include a live demo of the problem. Per our contributing guidelines, please create a reduced test case via CodePen or JS Bin and report back with your link, Bootstrap version, and specific browser and OS details.

[AdrianKuriata]

Codepen is here but i can't set with this code IE emulation on IE 10 so maybe you can try do this. With IE 11 and Edge navigation and .ml-auto working perfectly.

https://codepen.io/anon/pen/MEGVZR

I tested this with clear navbar from documentation and i added .ml-auto, on IE10 same result.

Ok i tested it so more and i found a problem. .ml-auto not working properly with navbar-brand. If you put here big logo, this will be moved to right, don't stop on window viewport edge. If i deleted navbar, navigation is displaying properly.

[XhmikosR]

@AdrianKuriata: Codepen no longer works with IE10. Maybe try jsbin?

[AdrianKuriata]

@XhmikosR

JSBin for you: https://jsbin.com/hagigevasu/edit?html,css,js,output

Yes, this working on JSBin, check this out, open output, click F12 in IE, change emulation to IE10 and look at the moving navigation to right. If you remove navbar-brand, navigation will be work properly.

[XhmikosR]

@AdrianKuriata: try adding a .container/.container-fluid as the first child in .navbar.

[AdrianKuriata]

@XhmikosR not working.

With .containernavigation is displaying, but get out of div so if i put huge text in .navbar-brand or logo i don't see navigation.

With .container-fluid same result like a without it.

Here is a picture with.container: https://i.imgur.com/KUxfmIS.png

[XhmikosR]

Seems to work fine with .container-fluid on IE10 (not emulated)

<nav class="navbar fixed-top sticky-top navbar-expand-lg navbar-light nav-font-size bg-light">
    <div class="container-fluid">
...
    </div>
</nav>

[AdrianKuriata]

@XhmikosR Hi,

I installed on VM Windows 7 with IE 10, set a cleared navigation with container-fluid and this won't work for me. Only after set 60% max-width for .navbar-collapse i can see full navbar.

[XhmikosR]

Then I'm not sure what else is wrong. I'm personally using v4 and I don't have that problem.

Maybe @andresgalante @Johann-S have an idea.

[XhmikosR]

https://codepen.io/XhmikosR/pen/yzqNQM

Seems to work fine with .container as you can see. You were also missing loading popper.js.

[AdrianKuriata]

Codepen not working with IE10 and i added html block from bootstrap documentation. I will try record video to show you where is a problem.

[Herst]

Should this really be an IE10-specific problem and something which does not occur in IE11, maybe it's time to drop support for IE10 just like support for IE9 was dropped (#21416)?

[AdrianKuriata]

Hi, i wanted to use .has-error with bootstrap 4 but in documentation i can see this class was changed to .has-danger. But this class doesn't exists in beta bootstrap css file, i don't know, this is bug or something?

[andresgalante]

@XhmikosR I can reproduce the issue with the navbar on win7 IE10. I'll check the markup and try to spot the problem.

@AdrianKuriata Related to your comment about form validation:
https://github.com/twbs/bootstrap/blob/v4-dev/docs/4.0/migration.md#forms

Replaced .has-error, .has-warning, and .has-success classes with HTML5 form validation via CSS's :invalid and :valid pseudo-classes.

[XhmikosR]

@andresgalante: I could repro too, but with a .container-fluid inside the navbar, it was fixed.

[mdo]

Is the original navbar issue here a Bootstrap bug or is this something in custom code? I'm not seeing a specific problem in our HTML or CSS pointed out yet.

[mdo]

Also I've updated the issue title back to it's original—the form change is unrelated and works as intended.

[AdrianKuriata]

I tested clear navbar from your documentation into .container and .container-fluid on clear windows 7, IE10 and i had bug when i had .navbar-brand in navigayion, when i deleted it, navigation working oki, problem is .ml-auto

[mdo]

Is this the same as #24413?

[AdrianKuriata]

@mdo yea this is the same but only on IE 10 with .ml-auto class with navbar. I didnt test with .mr-auto and d-flex.

[mdo]

See #24427.