Topic: SideNav Main/Content Padding

Jordan free asked 3 years ago


Expected behavior I expect the left padding added to the main section (id: page-content) to match the width of the SideNav.

Actual behavior The expected padding is doubled and the page content is not adjacent to the Sidenav.

Resources (screenshots, code snippets etc.) https://mdbootstrap.com/snippets/standard/mcfarland/2700573


Piotr Urbaniak free answered 3 years ago


Hello Jordan,
I prepared a snippet for You, check if this solves your problem,

Code snippet: https://mdbootstrap.com/snippets/standard/mcfarland/2700573#js-tab-view
Best regards


Jordan free commented 3 years ago

Hi Piotr, yes! That is what I wanted! Thank you!


Piotr Urbaniak free answered 3 years ago


Hello Jordan,
If I understand correctly, I suggest adding the data-mode="over" attribute to the <div>class="sidenav d-flex flex-column"> and then add padding-left: 200px property in the <div id="page-content"> . If this does not solve your problem, please provide a more detailed description.

Best regards


Jordan free commented 3 years ago

Hi @Piotr Urbaniak, I want the side nav to be displayed next to the page content - not over it. Sorry for not clarifying in OP.

Thank you for the suggestion!


Piotr Urbaniak free commented 3 years ago

Did You try set sidenav div as child element and add data-mode=side to it? Check our tab "Positioning" on https://mdbootstrap.com/docs/standard/navigation/sidenav/ Best regards


Jordan free commented 3 years ago

If I am understanding you correctly, I believe that is what I did in the snippet I originally posted and it did not work.



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: 2.0.0
  • Device: PC
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: Yes