Utilizing Bootstrap 4 to create fixed and fluid width side-by-side divs with scrollbars

I want to create a basic dashboard page.

I decided to arrange two divs next to each other to serve as the side menu and content. Here is what the layout looks like:

https://i.sstatic.net/EATK6.png

I encountered an issue where the vertical scrollbar is not visible even though there is more content beyond what is shown on the page.

Although scrolling is still possible, it's puzzling why the scrollbar isn't visible.

I am using bootstrap 4 along with custom CSS.

What could be causing this issue? And is there a better way to implement this using bootstrap 4?

Here is the code snippet:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Dashboard Test</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
  <style>
    #sideMenu {
        height: 100%;
        width: 250px;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        background-color: #222D32;
        overflow-x: hidden;
        transition: 0.3s;
    }

    #mainContents {
        height: 100%;
        width: 100%;
        padding-right: 250px;
        position: fixed;
        z-index: -1;
        top: 0px;
        left: 250px;            
        background-color: #ECF0F5;
        overflow-x: hidden;
        transition: 0.3s;
    }

    #contentBody {
        width: 100%;
        padding: 20px;
        margin-bottom: 50px;
    }
</style>
</head>
<body>

    <div id="sideMenu">

    </div>

    <div id="mainContents">
        <div id="contentBody">
                <h1>Lorem Ipsum</h1>                
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec euismod nisl, in mattis purus. Donec finibus luctus libero, sed lobortis elit maximus non. Quisque vitae venenatis odio, in dictum...

        </div>
    </div>

</body>
</html>

Answer №1

A more streamlined approach that works well with Bootstrap...

<div class="container-fluid">
    <div class="row">
        <div class="sidebar col">Sidebar</div>
        <div class="main col">
            ..
        </div>
    </div>
</div>

.sidebar {
    width: 250px;
    min-height: 100vh;
    position: fixed;
}

.main {
    padding-left: 265px;
}

Answer №2

The issue with the scroll not being visible is due to setting the width of the body to 100%, pushing the div 250px to the right, and adding padding to the right side, causing the content to overflow to the right.

To correct this, adjust the CSS code as follows:

#mainContents {
        height: 100%;
        width: 100%;
        padding-left: 250px;
        position: fixed;
        z-index: -1;
        top: 0px;
        background-color: #ECF0F5;
        overflow-x: hidden;
        overflow-y: auto;
        transition: 0.3s;
    }

Implementing this solution should resolve the issue you are experiencing.

Answer №3

Let's start by making a change to the #mainContents style

    width: 100%;
    padding-right: 250px;

After removing the above lines, your style should look like this

  <style>
    #sideMenu {
        height: 100%;
        width: 250px;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        background-color: #222D32;
        overflow-x: hidden;
        transition: 0.3s;
    }

    #mainContents {
        height: 100%;
        width: 100%;
        position: fixed;
        z-index: -1;
        top: 0px;
        left: 250px;            
        background-color: #ECF0F5;
        overflow-x: hidden;
        transition: 0.3s;
    }

    #contentBody {
        width: 100%;
        padding: 20px;
        margin-bottom: 50px;
    }
</style>

Please verify the code of the entire page below

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Dashboard Test</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
  <style>
    #sideMenu {
        height: 100%;
        width: 250px;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        background-color: #222D32;
        overflow-x: hidden;
        transition: 0.3s;
    }

    #mainContents {
        height: 100%;
        width: 100%;
        position: fixed;
        z-index: -1;
        top: 0px;
        left: 250px;            
        background-color: #ECF0F5;
        overflow-x: hidden;
        transition: 0.3s;
    }

    #contentBody {
        width: 100%;
        padding: 20px;
        margin-bottom: 50px;
    }
</style>
</head>
<body>

    <div id="sideMenu">

    </div>

    <div id="mainContents">
        <div id="contentBody">
                <h1>Lorem Ipsum</h1>                
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec euismod nisl, in mattis purus... </p>
                <p>...ex ac eros.</p>
                <p>...non turpis.</p>
                <p>...vel dignissim nibh eros ac eros.</p>
                <p>...s viverra egestas.</p>
                <p>...ignum sagittis.</p>
        </div>
    </div>

</body>
</html>

Answer №4

try implementing the following code snippet:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Dashboard Test</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
  <style>
    #sideMenu {
        height: 100%;
        width: 250px;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        background-color: #222D32;
        overflow-x: hidden;
        transition: 0.3s;
    }

    #mainContents {
        height: 100%;
        width: 100%;
        padding-right: 250px;
        position: fixed;
        z-index: -1;
        top: 0px;
        left: 250px;            
        background-color: #ECF0F5;
        overflow-x: hidden;
        transition: 0.3s;
    }

    #contentBody {
        width: 100%;
        padding: 20px;
        margin-bottom: 50px;
    }
</style>
</head>
<body>

    <div id="sideMenu">

    </div>

    <div id="mainContents">
        <div id="contentBody" style="height:600px;width:480px;overflow:auto;background-color:yellowgreen;color:white;scrollbar-base-color:gold;font-family:sans-serif;padding:10px;">
            <h1>Lorem Ipsum</h1>               
            <p>Some placeholder text for demonstration purposes.</p>
        </div>
    </div>

</body>
</html>

Don't forget to include the specified CSS in the style attribute within the div tag.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for making a Scroll Button

I am in the process of designing a horizontal website and I would like to incorporate two buttons, one on the left and one on the right, that allow users to scroll to the left and right, respectively. You can check out the site I am currently working on h ...

Guide to automatically blur the input field and toggle it upon clicking the checkbox using Angular

<input (click)="check()" class="checkbox" type="checkbox"> <input [(ngModel)]="second_month" value="2019-09" type="month" [class.blurred]="isBlurred">> I need the second input(type=month) field to be initially blurred, and only unblur ...

"Exploring the process of integrating a controller into an external HTML file using AngularJS

I'm relatively new to AngularJS. In my web app, I have a set of buttons: index.html <button class="aButton">a</button> <button class="bButton">b</button> <script> $(document).ready(function(){ $(".aButton"). ...

Troubleshooting material design CSS problem in AngularJS routing module

Attempting to incorporate material design with routing in angular js, but encountering issues with CSS design not working. Interestingly, when using bootstrap CSS, it functions properly. Check out the Plnker Demo here However, upon trying this approach, ...

I am not getting any emails when users click on the "Pay Now" button

I am currently learning PHP and working on a website that integrates with the paytm gateway. I have a registration page with a "Pay Now" button, but when someone clicks on it, they are directed to pgRedirect.php (provided by paytm). I would like to recei ...

"Triggering CSS changes with the click of a

I am developing a basic calendar application in PHP and I would like to dynamically change the style of the <td> block based on user interactions. Specifically, I want to implement a behavior where once the "menuclick" class is active, the other cl ...

Utilizing Bootstrap for Efficient Image Alignment

I'm encountering an issue with my code and I am unsure of how to fix it. The current state of my code is different from the desired outcome https://i.sstatic.net/Ti1kK.jpg As you can see, the image above does not match the appearance of the image I ...

Creating a customized file input using CSS

I am currently utilizing Bootstrap4 to craft my webpage and I am incorporating a custom file input bar. To retrieve the three labels of the input bar ("Choose file", "Browse", "Upload") from my stylesheet, I have created three custom classes with their co ...

Distinguishing between these two hover text types: JQuery CSS, what sets them apart?

As a total jQuery novice, I've been curious about the difference between these two types of text that appear when you hover over something. Can someone please clarify what each one is? Thank you very much. First hover text: When hovering over the up- ...

Exploring the possibilities of applying CSS to customize the color of various elements

Is there a way to set the color of elements in CSS so that it applies to everything such as fonts, borders, and horizontal rules when applied to the body? How can I accomplish this effectively? ...

Change the background color of the selectInput component in Shiny to fit your

Take a look at this sample shiny app: library(shiny) ui <- fluidPage(tags$head(includeCSS("www/mycss.css")), selectInput("foo", "Choose", width = '20%', multiple = F, selected = "red1", choices = list(red = c ...

What is the reason behind my phone burger not working and how can I resolve the problem?

I am facing an issue with the burger menu icon on my website. When I click on the burger icon, it doesn't transform into a cross as intended. Even though I can see that the class .active is being added in the DOM, the menu doesn't respond to the ...

How to Determine If a String Represents an HTML Tag Using jQuery

Checking if a string is an HTML tag can be tricky. I've tried various methods found on Google, but none have been successful so far: var v = $(string).html() ? 1 : 0; --or---------------------------------------------- var htmlExpr = new RegExp("/^( ...

What is the best way to eliminate the gap between these two div elements?

There's a gap between two divs in my HTML that I can't seem to remove. Here are the relevant CSS styles: #tab-2-content { display: grid; grid-template-rows: 1fr 2fr; width: 70%; margin: 0 auto; grid-gap: 0; } ... (CSS code continues) ...

The Facebook comment section is taking control

<div class="fb-comments" data-href="https://www.facebook.com/pages/Societ%C3%A0-Ginnastica-Triestina-Nautica/149520068540338" data-width="270" data-num-posts="3"> I'm having trouble with the comment box extending past my div height and overlapp ...

Transforming a GIMP design into a fully functional webpage

How can I transform my GIMP design into an actual website? After reviewing some information, it appears that using GIMP might not be ideal for creating CSS. It is recommended to utilize a CSS/HTML editor instead. Exporting HTML/CSS with Inkscape or GIMP N ...

Persistent banner designed to accompany blog posts

I've been attempting to insert a banner ad that runs along the left side of my blog post. Unfortunately, all my efforts so far have caused it to display above the content, pushing the blog post down the page. You can view the live link here. Here i ...

Utilizing MaterialUI and CSS to craft this stunning box

Looking to create a new MaterialUI component similar to this one: original box Struggling with implementing it using the card component, but so far it looks like: poorly designed box Here's my custom styling using makeStyles: const useStyles = ma ...

Learn how to assign an image to a div element when it is collapsed, and then reveal the content when clicked on to expand

I am working on a three div with expand collapse functionality. When I expand one div, I want to set some image to the other divs. And when I go back to normal mode, I need the original content that was inside each div. $("a.expansion-btn").click(functi ...

Drawing the canvas is taking place prior to the image being fully loaded in JavaScript

Currently, I am in the process of creating a collage using images that are all sized at 174x174 pixels. The images are stored on my server, and while my program can locate them successfully, it requires me to click the "save image" button twice for them to ...