Need help with setting Offcanvas & white space in Content Area

Hello Guys,

Need your help in removing white space from the page after including Offcanvas component.
In the screen shot below, when the window is in full screen, the content appears surrounded by white space on both the sides. Is there a way to remove this white space, so that the content appears close to the offcanvas border and covers the entire screen space available.

This is how i have setup the Layout Page:

This is the CSS for the page:

:root {
    --offcanvas-width: 270px;
    --topNavbarHeight: 60px; 

} 
.offcanvas-start {
    width: 270px;
    position: fixed;
    top: 0;  
    left: 0;
    bottom: 0;
    overflow-y: auto; /* Add scroll functionality */
}

.offcanvas-header { 
  display: block !important; 

}


/* Adjust the margin of the main content */
main {
    margin-left: 270px; /* Adjust the same width as offcanvas-start */
    -webkit-transition: margin-left .5s;
    transition: margin-left .5s; /*sliding effect*/
  
}

.btn-toggle {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: .5rem;
  font-weight: 600;
  color: var(--bs-body-color);
  background-color: transparent;
  border: 0;
}

@media (min-width: 992px) {
    main {
        margin-left: var(--offcanvas-width);
    }
    .offcanvas-start {
        -webkit-transform: none;
                transform: none;
        visibility: visible !important;
        top: var(--topNavbarHeight);
        height: calc(100% - var(--topNavbarHeight));
    }
    
   
}

Try making the container a container-fluid:

1 Like

Thanks @ben for the solution.
Changing the container type to Fluid helped in removing the right hand space, which now is occupied by the content, however, the left side space still remains.
Can anything be done to reduce the left side blank space?

Hey AJ,

I think the area you are talking about:

is the column that contains the content page:

So, can you just check if your Salaries table is inside a “fixed” container and turn that also to fluid like @ben pointed for the layout page?

Remove this style rule

/* Adjust the margin of the main content */
main {
    margin-left: 270px; /* Adjust the same width as offcanvas-start */
    -webkit-transition: margin-left .5s;
    transition: margin-left .5s; /*sliding effect*/
  
}
1 Like

I removed the code, however, it still shows the left space.

The content is placed in fluid container, still it has the left space. Is there anything else that I am missing?

a screenshot of your content page app structure?
image

When making css changes you may have to clear your browser cache to see the changes.

1 Like

Do you have a link that we can check?

You can also inspect it on your page, on the dev tools:

image

Select the element inspector

Point your mouse to the element and left click on that:

Then you’ll see all the rules of that element:

You can play with that and try some config there.

Also, adding Brad suggestion (you can use incognito or force reload with ctrl+shift+R) remember to have the custom css file after the bootstrap css file like:

    <link rel="stylesheet" href="../bootstrap/5/css/bootstrap.min.css" />
    <link rel="stylesheet" href="../css/style.css" />