[Bug] Screen not resizing after removing sidebar

[shamseen]

Version

1.3.0

Reproduction link

https://jsfiddle.net/

Operating System

Windows 10

Device

PC

Browser & Version

Chrome x64 v87.0.4280.66

Steps to reproduce

1. Admin.jsx: comment out
2. npm start

   What is expected?

   div class='main-panel' will resize to fill screen.

   What is actually happening?

   Area of sidebar is still present, just empty. Dev tools doesn't show this blank space as a separate component.

---

Solution

Additional comments

[einazare]

Hello there, @shamseen ,

Thank you for your interest in working with our products, and for using the issue template <3. This is actually not a bug. It is expected behavior since the product was taught in mind to have the Sidebar, which is the main feature of it. To solve this, you can either (I would go with the second option, as the second option keeps the nice gray background)

1. Delete the main-content class as well, so

   <div id="main-panel" className="main-panel" ref="mainPanel">

   will become

   <div id="main-panel" ref="mainPanel">

2. Add the following CSS/SCSS:

   .main-panel {
       transition: none !important;
       width: 100% !important;
   }

I will close the issue, since, as said above, it was expected behavior for removing the sidebar component.

Best, Manu

[shamseen]

Thanks for responding so quickly!

Where do I put the css? Inline styling nor adding it to line 437 in light-bootstrap-dashboard-react.css changed anything.

[einazare]

Hello again, @shamseen ,

Create a new css file inside src/assets/css named shamseen.css, so now, you should have the file like so src/assets/css/shamseen.css. After that, you go inside src/index.js file, and at line 28, you add:

import "./assets/css/shamseen.css";

Now, you go inside the src/assets/css/shamseen.css file, and add the css from my last comment.

You are good to go.

Best, Manu

[shamseen]

Perfect thank you!!