.ml-auto class is bugged on IE10 in navbar #24319

AdrianKuriata · 2017-10-10T11:59:47Z

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>

The text was updated successfully, but these errors were encountered:

Johann-S · 2017-10-10T12:01:56Z

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 · 2017-10-10T12:19:26Z

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 · 2017-10-10T12:24:54Z

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

AdrianKuriata · 2017-10-10T12:34:46Z

@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 · 2017-10-10T12:48:24Z

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

AdrianKuriata · 2017-10-10T12:56:03Z

@XhmikosR not working.

With .container navigation 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 · 2017-10-10T12:59:21Z

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 · 2017-10-11T08:38:21Z

@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 · 2017-10-11T15:38:36Z

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 · 2017-10-12T03:25:02Z

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

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

AdrianKuriata · 2017-10-12T05:32:16Z

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 · 2017-10-12T11:10:31Z

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 · 2017-10-12T11:31:38Z

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 · 2017-10-13T11:28:07Z

@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 · 2017-10-13T11:43:56Z

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

mdo · 2017-10-18T04:30:29Z

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 · 2017-10-18T04:30:54Z

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

AdrianKuriata · 2017-10-18T05:21:08Z

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 · 2017-10-18T17:27:43Z

Is this the same as #24413?

AdrianKuriata · 2017-10-18T18:23:02Z

@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 · 2017-10-19T05:19:12Z

See #24427.

IE10 and IE11 do not properly support the use of margin-auto on flex parents with a justify-content value other than flex-start. This PR removes the examples showcasing those two classes at play together in favor of simpler ones with _just_ the margin-auto utilities. More details can be found at https://stackoverflow.com/a/37535548, which has been linked to from the docs as well. Closes #24319 and closes #24413.

Johann-S added awaiting-reply css v4 labels Oct 10, 2017

Johann-S removed the awaiting-reply label Oct 10, 2017

AdrianKuriata changed the title ~~.ml-auto class is bugged on IE10 in navbar~~ .ml-auto class is bugged on IE10 in navbar and missing has-danger in compiled file Oct 12, 2017

mdo changed the title ~~.ml-auto class is bugged on IE10 in navbar and missing has-danger in compiled file~~ .ml-auto class is bugged on IE10 in navbar Oct 18, 2017

mdo mentioned this issue Oct 19, 2017

Update docs for IE10+IE11 support of auto margins #24427

Merged

XhmikosR closed this as completed in #24427 Oct 19, 2017

andresgalante mentioned this issue Nov 8, 2017

IE 11 needs class w-100 in many locations. Inconsistency Chrome/firefox <-> IE11, iOS safari affected as well #24687

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

.ml-auto class is bugged on IE10 in navbar #24319

.ml-auto class is bugged on IE10 in navbar #24319

AdrianKuriata commented Oct 10, 2017 •

edited by XhmikosR

Loading

Johann-S commented Oct 10, 2017

AdrianKuriata commented Oct 10, 2017 •

edited

Loading

XhmikosR commented Oct 10, 2017

AdrianKuriata commented Oct 10, 2017 •

edited

Loading

XhmikosR commented Oct 10, 2017

AdrianKuriata commented Oct 10, 2017 •

edited

Loading

XhmikosR commented Oct 10, 2017

AdrianKuriata commented Oct 11, 2017

XhmikosR commented Oct 11, 2017

XhmikosR commented Oct 12, 2017

AdrianKuriata commented Oct 12, 2017

Herst commented Oct 12, 2017

AdrianKuriata commented Oct 12, 2017

andresgalante commented Oct 13, 2017

XhmikosR commented Oct 13, 2017

mdo commented Oct 18, 2017

mdo commented Oct 18, 2017

AdrianKuriata commented Oct 18, 2017

mdo commented Oct 18, 2017

AdrianKuriata commented Oct 18, 2017 •

edited

Loading

mdo commented Oct 19, 2017

.ml-auto class is bugged on IE10 in navbar #24319

.ml-auto class is bugged on IE10 in navbar #24319

Comments

AdrianKuriata commented Oct 10, 2017 • edited by XhmikosR Loading

Johann-S commented Oct 10, 2017

AdrianKuriata commented Oct 10, 2017 • edited Loading

XhmikosR commented Oct 10, 2017

AdrianKuriata commented Oct 10, 2017 • edited Loading

XhmikosR commented Oct 10, 2017

AdrianKuriata commented Oct 10, 2017 • edited Loading

XhmikosR commented Oct 10, 2017

AdrianKuriata commented Oct 11, 2017

XhmikosR commented Oct 11, 2017

XhmikosR commented Oct 12, 2017

AdrianKuriata commented Oct 12, 2017

Herst commented Oct 12, 2017

AdrianKuriata commented Oct 12, 2017

andresgalante commented Oct 13, 2017

XhmikosR commented Oct 13, 2017

mdo commented Oct 18, 2017

mdo commented Oct 18, 2017

AdrianKuriata commented Oct 18, 2017

mdo commented Oct 18, 2017

AdrianKuriata commented Oct 18, 2017 • edited Loading

mdo commented Oct 19, 2017

AdrianKuriata commented Oct 10, 2017 •

edited by XhmikosR

Loading

AdrianKuriata commented Oct 10, 2017 •

edited

Loading

AdrianKuriata commented Oct 10, 2017 •

edited

Loading

AdrianKuriata commented Oct 10, 2017 •

edited

Loading

AdrianKuriata commented Oct 18, 2017 •

edited

Loading