search

mdbootstrap / material-design-for-bootstrap

Important! A new UI Kit version for Bootstrap 5 is available. Access the latest free version via the link below.
https://mdbootstrap.com/docs/standard/
MIT License
9.35k stars 1.16k forks source link

Bug combining behaviours in drawers #294

Open durey opened 3 years ago

durey commented 3 years ago

Thanks in advance for your time.

Expected behavior

If I specify a drawer with these classes:

"bmd-layout-container bmd-drawer-f-r bmd-drawer-in-lg-up bmd-drawer-overlay-md-down"

I expect it to behave like this:

  1. On <= md screens, drawer appears closed
  2. On <= md screens, when I open drawer, it overlays
  3. On >= lg screens, drawer appears opened, pushing content
  4. On >= lg screens, when I close drawer, it pushes back

Actual behavior

Cases 1, 2 and 3 work perfectly, but in >= lg screens the toggle button doesn't work.

Your working environment and MDB version information

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" ...></script>
    <script src="https://unpkg.com/popper.js@1.12.6/dist/umd/popper.js" ...></script>
    <script src="https://unpkg.com/bootstrap-material-design@4.1.1/dist/js/bootstrap-material-design.js" ...></script>

Resources (screenshots, code snippets etc.)

A live example here: https://jsfiddle.net/pwjfx8v6/

  1. I just copied/pasted the starting template from here: https://mdbootstrap.github.io/bootstrap-material-design/docs/4.0/getting-started/introduction/
  2. Then I copied/pasted the first drawer example from here: https://mdbootstrap.github.io/bootstrap-material-design/docs/4.0/material-design/drawers/#push
  3. Then I added these two classes to the bmd-layout-container tag: bmd-drawer-in-lg-up bmd-drawer-overlay-md-down

For every question of technical nature, in order to get the most detailed answer as soon as possible, ask on our dedicated Support Forum