Modal: Navbar shift to right when you open modal

[Rankel]

Hello, i'am not sure if i should call it a bug or a request... I have seen that since the version 1.3.0, the issue with modal and content shift is fixed which is great thing but it seems there is an issue now for the navbar. Oh and sorry for my english, it's not my native language. Thank you!

Bug description:

The navbar shift a little to right when you open a modal.

Link to minimally-working plunker that reproduces the issue:

Maybe i don't need a plunker for this (if yes, sorry i will put one)? We can reproduces it on the demo page at http://angular-ui.github.io/bootstrap/#/modal (click on any button to open a modal and pay attention to the navbar at top)

Version of Angular, UIBS, and Bootstrap

Angular: 1.5.3

UIBS: 1.3.1

Bootstrap: 3.3.6

[deeg]

This happened to me too.

I ended up putting a little padding on navbar when body has modal-open class.

Interested to hear @RobJacobs thoughts on this to hear if this is something we could potentially fix in the library.

[Rankel]

Oh can i see your workaround? Because i tried to put a margin of 17px to the open modal class, it works fine for chrome and firefox but not for internet explorer...

[deeg]

I am not using the same navbar as you, but the same idea applies:

body.modal-open {
  .{class of navbar which should have padding} {
      padding-right: 30px;
    }
  }
}

It may not work for you if you are using a different navbar, I happen to be using Angular Material's toolbar and flex directive for my navbar right now.

[Rankel]

Hum that's what i did but i still have the issue in internet explorer, but actually it works fine in internet explorer if i don't put this workaround. So i will look for a way to add this workaround except for internet explorer. Thank you for help!

[karensg]

@deeg, @Rankel
The padding-right is calculated dynamically. Therefore you should use
padding-right: inherit;

[deeg]

@karensg, thanks for the suggestion, I will have to try it out.

After talking with the team, going to close this as won't fix. There is not much we can do about this situation due to the navbar being absolute positioned with a left & right set to 0. The navbar is acting how it should.

Suggest users take care of this through their own CSS if needed, with the suggestions provided above.

[Rankel]

@karensg
I tried your workaround but it doesn't seem to work for me in chrome.
Here a plunker for example http://plnkr.co/edit/ZBWY2E?p=preview

Maybe it is my OS (i use Windows 7)?

[RobJacobs]

I talked about the cause of this effect in #2631 and it boils down to the TWBS container class:

.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
} 

Setting the margin-right/left to auto makes the element center horizontal. The parent div with the navbar-fixed-top class has position: fixed and left/right: 0px. This sort of nesting does not honor the padding added to the body div. If the navbar-fixed-top element is a direct descendant of the body element, it works. Updated plunk

[Rankel]

Ooh great i see, thank you @RobJacobs !

[Rankel]

Hi @RobJacobs , it seems this doesn't work anymore with version 2.0.0. Do you know why or do you have a workaround?

Updated plunk http://plnkr.co/edit/I6yZw2wzfzEJ3sYtbNBw

Thank you