Dragged out Side-nav causing the &quot;body&quot; si

Topic: Dragged out Side-nav causing the "body" size to remain fixed on device rotate

Diamond Obama pro asked 6 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.

Add comment

Magdalena Obalska free answered 6 years ago

1 0 Best answer

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

Add comment

Diamond Obama pro answered 6 years ago

1 0 Best answer

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

Please insert min. 20 characters.

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

Add comment

Magdalena Obalska free answered 6 years ago

0 0 Best answer

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

Diamond Obama pro commented 6 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

Please insert min. 15 characters.

Add comment

Write

Create snippet

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

Diamond Obama

Pro User 14Support score
2Questions 1Answers 0Snippets