Troubleshooting a pesky problem with a scrolling sidebar element

I am experiencing an issue with the main content part of a sidebar that should be scrollable if it overflows. Unfortunately, instead of just the sidebar scrolling, it causes the entire page to scroll. Additionally, the scrolling is intended to occur within its container rather than affecting the whole sidebar.

How can I resolve this?

The desired layout looks like this:

___

header
___
nav pill 1 
nav pill 2
___
a href image
a href image   
...  
...
___
button  
text
___
// JavaScript code snippet here
// CSS snippet here
<link href="Link_to_Bootstrap_CSS" rel="stylesheet">
<script src="Link_to_Bootstrap_JS" ></script>

// HTML code sample here

Using Bootstrap version 5.3.0 alpha1

Additionally, I would like feedback on my current approach. Each element in the sidebar is meant to have a fixed position. Should each element have `position: fixed` or only the sidebar itself? Any guidance would be appreciated

edit: also where

test text here 0000000000000000000000000
is, how do i shrink that or confine it inside the div?

edit2: edited code to show some updates

Answer №1

Customize overflow behaviors for each of the 3 containers

To prevent scrolling in the outer container, it's crucial to specify that it should not scroll. Failing to block scrolling in the outer container was causing the issue you encountered.

Next, configure the sidebar to scroll on its own, and separately enable scrolling for the main content area.

I've included three different style attributes in your code snippet, one for each container. You're already using classes effectively, so make sure to add these styles to the appropriate classes (I couldn't locate the class for the main body text).

#sidebar_header {
  top: 0;
  text-align: center;
}

#sidebar_sub_header {
  /* position: fixed; */
  /* width: inherit; */
}

#sidebar_main_content {
  overflow-y: scroll;
}

#sidebar_footer {
  position: fixed;
  bottom: 0;
  width: inherit;
}

#sidebar {
  width: 250px;
  min-height: 100vh;
  max-height: 100vh;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f99b96968d8a8d8b9889b9ccd7cad7c9d49895899198c8">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="stylesheet" href="{{ url_for('static', filename='css/dashboard_test.css') }}" />

...

</script>

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

Handling Errors in Node.js with Express

To access the complete repository for this project, visit: https://github.com/austindickey/FriendFinder After downloading the directory, follow the instructions in the ReadMe to set it up on your computer. Encountering an issue where my survey.html page ...

Encountered a problem while trying to update a list item in Vue.js

Greetings Everyone, I've successfully implemented a basic CRUD functionality in VueJS. The values are being inserted into a list, from which I can read and delete them. However, I'm facing an issue with updating any value. When I try to ...

How can I set up a session in order to fetch information from a MySQL table

Can you guide me on implementing this session: (UserID is part of the login table) Session["UserID"]="usrName"; How can I incorporate the above code into the following script? using System; using System.Data; using System.Collections.Generic; using Sys ...

Trouble arises with the jQuery keydown function

Currently, I am encountering an issue with a straightforward jQuery code implementation. In addition to the problem description, I have included the HTML structure below, The current functionality works as expected in setting focus on the input field upo ...

Creating a loading mask for a section of a webpage using angularjs

How can I implement a loading mask/image for a $http request that loads data for a <select> tag on my webpage? I want the loading mask/image to only cover the specific section of the page where the data is being loaded. Here's the HTML code: & ...

What is the best way to add style to the title attribute of a dropdown menu item?

In my webform project, I have implemented a dropdown menu with custom tooltips for the list items. These tooltips are different from the display field and value field, which can be considered as the third column. To bind the tooltips to the list items usin ...

The CSS files undergo modifications when executing the command "npm run dev"

I've been working on an open-source project where I encountered a bug. Even when there are no images to display, the "Load More" button in the web browser extension still appears. To fix this, I decided to add the class `removeButton` to the button an ...

Divs in jQuery smoothly slide down when a category is chosen

As I work on a large website, I have hidden div tags in my HTML that I want to be displayed when a user selects a specific category. However, due to the size of the site, there are many hidden divs that need to be revealed based on different categories sel ...

Circular graphs displaying percentages at their center, illustrating the distribution of checked checkboxes across various categories

Looking for a JavaScript script that displays results in the form of circles with percentage values at their centers, based on the number of checkboxes checked in different categories. The circle radius should be determined by the percentage values - for e ...

Trouble with the query waypoints extension in a simple demonstration

Can anyone help me figure out why the basic example from the waypoints plugin isn't working for me? Here's a link to the jsfiddle I created: http://jsfiddle.net/ZA8bd/2/ CSS .block1 { margin-top:30px; width: 400px; background: red; ...

Purge precise LocalStorage data in HTML/JavaScript

How can a specific item in the localStorage be cleared using javascript within an html file? localStorage.setItem("one"); localStorage.setItem("two"); //What is the method to clear only "one" ...

When the jQuery Div is moved to the right, it gradually shrinks in size, yet remains unchanged when

I have been making updates to this page, which you can view here. When you select "Let's Get Started" and then proceed with the right arrows, the divs smoothly move to the left without shrinking. However, when clicking on the back or left arrows, the ...

Tips for sending multiple values in a data object using jQuery AJAX

I am currently working on a form that contains two input fields, with the possibility of more being added later. The first input is a text field and the second is a checkbox. I want to be able to send these inputs using $.ajax. To accomplish this, I have ...

Creating a sleek dark-themed table using Bootstrap's HTML

While browsing through https://getbootstrap.com/docs/4.0/content/tables/, I came across a table with a really dark background towards the bottom of the page. I tried copying the code into an HTML document, but it didn't seem to work. After tinkering w ...

How to target a class with a specific number in CSS selectors

My mobile hybrid application is built with Sencha Touch 2 and requires some customization based on the iOS version it's running on. In my Sass stylesheet, I originally had the following selector: .x-ios-7 { /* add iOS7 customizations here */ } How ...

Using absolute positioning on elements can result in the page zooming out

While this answer may seem obvious, I have been unable to find any similar solutions online. The problem lies with my responsive navbar, which functions perfectly on larger screens. However, on mobile devices, the entire website appears zoomed out like thi ...

What could be causing my media query to not function properly?

I've been experimenting with some basic media queries but am encountering an issue with the div element that has the class "container." Whenever I adjust the screen size to be between 992px and 1200px, the div disappears from the page. It's perpl ...

The hierarchy of styles in Rails CSS/SCSS

I'm currently exploring the concept of css precedence rules in rails. In my application, I am looking to apply different css rules based on different controllers. However, when I add css to one of the css.scss files, it ends up affecting all controll ...

put two elements next to each other in a single row

This specific section contains an image positioned at the top, followed by two other components (within <ItemsContainer/>) at the bottom which display as separate rows. I am trying to place these two items (a grid and a chart) side by side within the ...

By clicking, dynamically add unique classes along with incrementing numerical values

I have a span tag and a button tag <span class="myspan">1</span> <button id="add">Add +1</button> var arr=["myspan1","myspan2","myspan3","myspan4"} In order to add more span tags with new classes from the array and increase the v ...