Topic: Panel to slide in from the right

chrislennon priority asked 2 years ago

Hi there

I am trying to achieve a result where a panel (showing online help in my case) will slide into view from the right. Clicking outside this panel should close it. I don't think a sidenav is quite right as this is just a panel with information

I think a model may be best, but there seems to be no 'frame-modal right' option, just top and bottom. Also the modal should not cover the top menu, i.e. there should be a gap between the top of the page and the modal

I have cloned the admin template for my snippet (URL below), and just made one change, to put a 'show help' button on the top navbar. When clicked the side panel should slide out. The effect would be similar to (just with a gap at the top so the 'show help' button isn't covered)

How could this be achieved with mdbootstrap?



*Resources (screenshots, code snippets etc.)*See snippet

Grzegorz Bujański staff answered 2 years ago

Bootstrap provides a new component - offcanvas. You can also use it in MDB: If I understand correctly, this is the solution you are looking for.

chrislennon priority commented 2 years ago

Thank you that worked perfectly. Documentation was also very helpful

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 3.11.0
  • Device: Laptop
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: Yes