What are some effective ways to prevent a sidebar layout from scrolling in bootstrap?

I'm working on creating a simple admin panel and have set up a sidebar layout. My goal is to keep the sidebar fixed so that it doesn't scroll when I scroll down the page. Initially, it looks like this:

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

However, as I scroll down the page, the sidebar also scrolls down, which is not what I want. This is how it appears after scrolling:

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

I want to maintain the appearance from the first picture even when the page is scrolled. The initial sidebar code snippet is as follows:

<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar" style="max-height:100%">

Edit: I attempted 

.navbar-nav { position: fixed; left: 0; top: 0; bottom: 0, width: 150px; }
with the following result: https://i.sstatic.net/R61bo.png

javascripthtmlcssbootstrap-4

Answer №1

Give this method a try

<div class="container-fluid">
    <div class="row">
        <div class="col-md-3 px-1 bg-dark position-fixed">
            ...
        </div>
        <div class="col-md-offset-3 col-md-9 col-sm-12">
            <h1>Primary Section</h1>
            ...
        </div>
    </div>
</div>

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

How to use jQuery to select an element by using 'this' on a button

I have a total of 5 divs, each containing 5 different texts. <div class="text"> <%= theComment.text %> </div> I am working with node.js, MongoDB, and Mongoose. In addition to the divs, I also have a button labeled EDIT with a cl ...

javascriptjqueryhtmlnode.jsmongodb

The updated bootstrap.min.css file may have compatibility issues with Bootstrap navigation, while an earlier version should work seamlessly

Currently, I am working on developing a menu using bootstrap. When the menu is toggleable, it collapses into a hamburger menu. However, I have encountered an issue where the navigation only works with an earlier version of bootstap.min.css and not with t ...

bootstrap-4

Combining Mongoose OR conditions with ObjectIDs

After querying my Team schema, I am receiving an array of ids which I have confirmed is correct. The issue seems to lie in the fact that both home_team and away_team are ObjectIDs for the Team Schema within my OR statement. Team.find({ 'conferenc ...

javascriptnode.jsexpressmongoose

Create a scrollable horizontal list of items

I am encountering an issue with my mat chip list in Angular Material. I have a mat chip list filled with mat-chips that I want to display in a single row. If there are more items than can fit on the screen, I would like the area to be scrollable horizonta ...

cssangular

Can the load API in jQuery be utilized to load fragments using a class selector instead of an id?

I've been working on enhancing a website's dashboard by incorporating more widgets onto the page. Interestingly, these widgets are already present on another page within the same domain. After some research, I discovered that utilizing the load A ...

javascriptjqueryhtmlajax

Preventing jQuery from removing child elements while inserting data through ajax

When I try to insert data into an HTML structure using the code below, only one of the elements displays at a time. It seems like when I use Ajax to insert data, the child elements are being removed. How can I prevent this without having to change the stru ...

javascriptjqueryajaxparent-child

Overcoming Ngx-Bootstrap's Inline Datepicker Issue

I would appreciate some suggestions or workarounds. I am experiencing an issue with the user experience of the ngx-bootstrap inline datepicker. When a user selects a date range on the same day, they may only click once. However, the problem arises because ...

htmlcssangularfrontendngx-bootstrap

Angular2's customer filter pipe allows for easy sorting and filtering of

Check out the component view below: <h2>Topic listing</h2> <form id="filter"> <label>Filter topics by name:</label> <input type="text" [(ngModel)]="term"> </form> <ul id="topic-listing"> <li *ngFo ...

htmlformsangularangular-pipe

Flickering problems occur when using Jquery to load MVC Views upon hovering

I am trying to create a hover effect that expands and changes the content of each div when hovered over, and reverts back to its original state on mouseout. To achieve this, I am using MVC partial views: (Subpages.cshtml) <div id="subpages" c ...

jquerycssasp.net-mvcbootstrap-4

What is the ideal timing to incorporate an error handler in an Observable?

I find myself uncertain about the best practices for error handling in general. For instance, if I'm already handling errors in my service using catchError, is it necessary to also include an error handler in my subscription? Here's an example o ...

javascriptangulartypescript

What is the reason for requiring a style to be set instead of using a class?

Trying to implement the footer staying at the bottom of my website like in this example. You can view my site here. The method is successful, however, I am required to apply the style style="min-height: 100vh;" directly to the body element inste ...

cssbootstrap-4footer

Position a component in relation to another component using AngularJS

Utilizing ng-show and ng-hide, I created a descriptive box that appears below text when clicked. However, there is an issue as the description box does not align directly under the text, similar to what is shown in this image https://i.stack.imgur.com/phBh ...

javascripthtmlcssangularjs

Insert the picture into an HTML document and retrieve the image file location

I successfully used <input type="file" accept="image/*"> to upload an image and then applied base64 encoding of the image in the onload callback function of a FileReader instance. However, I encountered a problem when trying to assign this base64 enc ...

javascripthtmlvue.js

Implementing a Pagination Component in React JS using Ant Design to Display 4 Products on Each Page

Is there a way to display 4 products on every page using the ant design Pagination component in React JS? My goal is to have 4 products shown on each page using the ant design pagination while also incorporating search and filtering functionalities. Curre ...

javascriptreactjspaginationantd

Fetching locales asynchronously in nuxt.js using i18n and axios: A step-by-step guide

I am facing an issue with getting the location asynchronously. Whenever I try to implement my code, it results in a "Maximum call stack size exceeded" error. How can I resolve this issue? Previously, I attempted to retrieve the location by using the axios ...

javascriptvue.jsvuejs2axiosnuxt.js

Ban on the utilization of emojireact-role in external channels

How can I ensure that the bell reaction only gives a role in a specific channel? The provided code is below. Additionally, is there a way to restrict this feature so only administrators can assign roles through reacting with a bell emoji? Any assistance ...

javascriptnode.jsdiscorddiscord.js

What is the most efficient way to develop a text messaging system with minimal delay?

Currently, I am in the process of developing an app using PhoneGap that should function similarly to a messaging application. The challenge I am facing revolves around issues related to latency and data consumption. I have experimented with various metho ...

javascriptandroidiosnode.jscordova

How can I execute code once the webpage has finished loading properly?

On my webpage, referred to as X, I inserted a script tag within the head section. This script is designed to scan the body after it has finished rendering. I attempted using jQuery.ready() but unfortunately it did not trigger! Is it possible that the DOM ...

javascriptjquery

Page width incorrectly set leading to unnecessary scrolling

Having a bit of trouble with this layout - while everything looks good, the page extends to the right with just a blank space. I've tried everything but nothing seems to work. .container.open-sidebar { position: relative; left: 240px; } #sidebar ...

htmlcss

What is the best way to incorporate a unique font into text using CSS?

Similar Question: How do I implement custom fonts in CSS? Is there a way to use CSS to define a custom font for elements like a <div>? I've heard about using @font-face ... but it doesn't seem to be effective in IE or Chrome. ...

htmlcssfonts