Panel to slide in from the right


Topic: Panel to slide in from the right

chrislennon pro premium priority asked 3 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 https://mdbootstrap.com/snippets/jquery/piotr-glejzer/215892 (just with a gap at the top so the 'show help' button isn't covered)

How could this be achieved with mdbootstrap?

thanks

Chris

*Resources (screenshots, code snippets etc.)*See snippet https://mdbootstrap.com/snippets/standard/chrislennon/3774867


Grzegorz Bujański staff answered 3 years ago

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


chrislennon pro premium priority commented 3 years ago

Thank you that worked perfectly. Documentation was also very helpful


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue
  • User: Pro
  • 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
Tags