Html Question posted in
Some basic documentation can be found here.

Html – How to show scrollbar in sidebar

I am designing a view ads page. I am not super savvy about bootstrap. I want to have a scrollbar in the filters to browse all the contents. The filter should stay fixed while the user browse ads in the main section.

<head>
<link
rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"/>
</head>
<body>

<div class="container-fluid">
  <div class="row">
    <div
      class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse"
      id="sidebar"
    >
      <form class="needs-validation" novalidate>
        <div class="mb-3">
          <label for="view">View</label>
          <select class="form-control" id="view" name="view">
            <option value="gallery">Gallery</option>
            <option value="list">List</option>
          </select>
        </div>
        <div class="mb-3">
          <label for="sort">Sort</label>
          <select class="form-control" id="sort" name="sort" value="">
            <option value="newest">Newest</option>
            <option value="oldest">Oldest</option>
          </select>
        </div>
        <div class="mb-3">
          <input
            type="checkbox"
            class="form-check-input"
            id="has_images"
            name="has_images"
          />
          <label class="form-check-label" for="has_images">Has Images</label>
        </div>
         
        <div class="d-flex justify-content-between">
          <button type="submit" class="btn btn-outline-primary">Reset</button>
          <button type="submit" class="btn btn-primary">Apply</button>
        </div>
      </form>
    </div>
    <main class="col-md-9 col-lg-10 px-md-4">
      <div class="d-flex justify-content-end pt-3 pb-2 mb-3 border-bottom">
        <button
          class="btn btn-secondary d-md-none"
          type="button"
          data-toggle="collapse"
          data-target="#sidebar"
        >
          Toggle Filters
        </button>
      </div>
    </main>
  </div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

</body>
</html>

As the picture shows:
filter with scrollbar

I tried adding "position=fixed" to the sidebar, but the main ads overlapped with the sidebar.

Tags:

2

Answers


  1. 0

    You need to add some fixed height and overflow to sidebar. Below is working example and I have added height: 300px & overflow: auto for example purpose, you can add whatever height you like.

    #sidebar {
  height: 300px;
  overflow: auto;
}
    <head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />
</head>

<body>

  <div class="container-fluid">
    <div class="row">
      <div class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse" id="sidebar">
        <form class="needs-validation" novalidate>
          <div class="mb-3">
            <label for="view">View</label>
            <select class="form-control" id="view" name="view">
              <option value="gallery">Gallery</option>
              <option value="list">List</option>
            </select>
          </div>
          <div class="mb-3">
            <label for="sort">Sort</label>
            <select class="form-control" id="sort" name="sort" value="">
              <option value="newest">Newest</option>
              <option value="oldest">Oldest</option>
            </select>
          </div>
          <div class="mb-3">
            <label for="sort">Sort</label>
            <select class="form-control" id="sort" name="sort" value="">
              <option value="newest">Newest</option>
              <option value="oldest">Oldest</option>
            </select>
          </div>
          <div class="mb-3">
            <label for="sort">Sort</label>
            <select class="form-control" id="sort" name="sort" value="">
              <option value="newest">Newest</option>
              <option value="oldest">Oldest</option>
            </select>
          </div>
          <div class="mb-3">
            <label for="sort">Sort</label>
            <select class="form-control" id="sort" name="sort" value="">
              <option value="newest">Newest</option>
              <option value="oldest">Oldest</option>
            </select>
          </div>
          <div class="mb-3">
            <input type="checkbox" class="form-check-input" id="has_images" name="has_images" />
            <label class="form-check-label" for="has_images">Has Images</label>
          </div>

          <div class="d-flex justify-content-between">
            <button type="submit" class="btn btn-outline-primary">Reset</button>
            <button type="submit" class="btn btn-primary">Apply</button>
          </div>
        </form>
      </div>
      <main class="col-md-9 col-lg-10 px-md-4">
        <div class="d-flex justify-content-end pt-3 pb-2 mb-3 border-bottom">
          <button class="btn btn-secondary d-md-none" type="button" data-toggle="collapse" data-target="#sidebar">
          Toggle Filters
        </button>
        </div>
      </main>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

</body>

</html>
    Login or Signup to reply.
  2. 0

    To add a scrollbar to your sidebar and keep it fixed while avoiding overlap with the main content, you can modify the layout slightly and use position: sticky instead of position: fixed. This ensures the sidebar scrolls within the viewport and stays in place. Here’s how you can do it:

      .sidebar {
height: 100vh; /* Full viewport height */
overflow-y: auto; /* Add vertical scroll */
position: sticky; /* Keep sidebar fixed while scrolling */
top: 0;

    }

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search