ct-material-kit-pro icon indicating copy to clipboard operation
ct-material-kit-pro copied to clipboard

Bug with modal popup and navbar with fixed-top

Open timmygee opened this issue 6 years ago • 2 comments

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

  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 avatar Aug 28 '19 19:08 timmygee

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

.navbar {
    transition-duration: 0s;
}

timmygee avatar Aug 28 '19 20:08 timmygee

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

groovemen avatar Aug 29 '19 10:08 groovemen