creativetimofficial / ct-material-kit-pro

Premium Bootstrap 4 UI Kit based on Google's Material Design
https://www.creative-tim.com/product/material-kit-pro
128 stars 37 forks source link

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

Open timmygee opened 5 years ago

timmygee commented 5 years ago

Prerequisites

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

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

timmygee commented 5 years ago

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 commented 5 years ago

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