Bug with modal popup and navbar with fixed-top
Prerequisites
Please answer the following questions for yourself before submitting an issue.
- [x] I am running the latest version
- [X] I checked the documentation and found no answer
- [X] I checked to make sure that this issue has not already been filed
- [X] I'm reporting the issue to the correct repository (for multi-repository projects)
Expected Behavior
Navbar elements remain static when modal is revealed
Current Behavior
Navbar elements "jiggle" left and right momentarily when modal is revealed and scrollbar is removed. The width of the navbar seems to change and then change back when the modal is revealed
Failure Information (for bugs)
This only happens when the navbar has the fixed-top class applied and the page is taller then the viewport width (hence the scrollbar gets removed and added when modal is toggled)
Steps to Reproduce
Click here for video demonstrating the issue with and then without fixed-top class applied
- Set up a page with a navbar with a that has the classes "navbar navbar-expand-lg fixed-top"
- Add a logo on the left and nav items on the right
- Set up a modal as per the example in https://demos.creative-tim.com/material-kit-pro/docs/2.1/components/modal.html
- Set up a button to launch said modal
- Observe said issue
- Remove the fixed-top class.
- Observe the issue is no longer there
Context
- Device: Macbook Pro
- Operating System: MacOS
- Browser and Version: Chrome (latest)
I have implemented a workaround for the issue. This css rule seems to stop the navbar resizing from being visible:
.navbar {
transition-duration: 0s;
}
Hello @timmygee,
Thank you for using our products and for your feedback. If you solved the issue, we will integrate it or we will find another solution for the next update of the product. Sorry for the inconvenience. All the best, Stefan