Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bug with modal popup and navbar with fixed-top #154

Open
4 tasks done
timmygee opened this issue Aug 28, 2019 · 2 comments
Open
4 tasks done

Bug with modal popup and navbar with fixed-top #154

timmygee opened this issue Aug 28, 2019 · 2 comments

Comments

@timmygee
Copy link

timmygee commented Aug 28, 2019

Prerequisites

Please answer the following questions for yourself before submitting an issue.

  • I am running the latest version
  • I checked the documentation and found no answer
  • I checked to make sure that this issue has not already been filed
  • 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

  1. Set up a page with a navbar with a that has the classes "navbar navbar-expand-lg fixed-top"
  2. Add a logo on the left and nav items on the right
  3. Set up a modal as per the example in https://demos.creative-tim.com/material-kit-pro/docs/2.1/components/modal.html
  4. Set up a button to launch said modal
  5. Observe said issue
  6. Remove the fixed-top class.
  7. Observe the issue is no longer there

Context

  • Device: Macbook Pro
  • Operating System: MacOS
  • Browser and Version: Chrome (latest)
@timmygee timmygee changed the title Bug with modal popup and navbar with fixed-op Bug with modal popup and navbar with fixed-top Aug 28, 2019
@timmygee
Copy link
Author

I have implemented a workaround for the issue. This css rule seems to stop the navbar resizing from being visible:

.navbar {
    transition-duration: 0s;
}

@groovemen
Copy link
Contributor

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants