Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!

  1. MDB Home Page
  2. Support Main Page
  3. General Bootstrap questions
Topic: Dragged out Side-nav causing the "body" size to remain fixed on device rotate

Diamond Obama pro asked 7 years ago

There is an issue with Side-nav. When the side-nav is dragged out from the edge in portrait mode on mobile and the device is rotated, the body size remains fixed at portrait size. A similar thing happens when in landscape mode and the side-nav is dragged out and device got rotated, the body size remains fixed, causing the page to look distorted.

Magdalena Obalska free answered 7 years ago

Now it's clear - thanks a lot for your report. We'll fix that soon.

Diamond Obama pro answered 7 years ago

Unfortunately, screenshot won't help and it's a generic problem happening even on your homepage. To reproduce:
  1. Go to mdbootstrap.com/live/_MDB/templates/Admin/invoice.html on Google Chrome browser
  2. Open your developer console and choose any mobile device for simulation
  3. In portrait mode, drag from left to right to open Side navigation panel
  4. While its opened, click the rotate icon at the top to switch to landscape mode
  5. Check the body elements behind the dark overlay not reflowing to fill the screen because it's size is now fixed to portrait mode
  1. On the same page in landscape mode, drag from left to right to open Side navigation panel
  2. While its opened, click the rotate icon at the top to switch to portrait mode
  3. Note the body elements and the Side-nav decreased in size, also the dark overlay not filling up the entire screen

Magdalena Obalska free answered 7 years ago

Hi, could you add some print screen and paste your code here, please?

Diamond Obama pro commented 7 years ago

Unfortunately, screenshot won't help and it's a generic problem happening even on your homepage. To reproduce: Go to mdbootstrap.com/live/_MDB/templates/Admin/invoice.html on Google Chrome browser Open your developer console and choose any mobile device for simulation In portrait mode, drag from left to right to open Side navigation panel While its opened, click the rotate icon at the top to switch to landscape mode Check the body elements behind the dark overlay not reflowing to fill the screen because it's size is now fixed to portrait mode On the same page in landscape mode, drag from left to right to open Side navigation panel While its opened, click the rotate icon at the top to switch to portrait mode Note the body elements and the Side-nav decreased in size, also the dark overlay not filling up the entire screen
Write
Create snippet
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
  • ForumUser: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: Yes
  • Provided link: No
Tags
About author
Diamond Obama
Pro User 14Support score
2Questions 1Answers 0Snippets