embedding a scrollable section within a stationary container

I'm facing an issue with two divs where I need the parent to be fixed and the child to be scrollable.

CSS for the parent div:

aside{
    height: 100%;
    float: left;
    width: 25%;
    position: fixed;
    border-style: solid;
    border-right-color:rgba(0, 0, 0, 0.2);
    border-top: none;
    border-left: none;
    border-bottom: none;
    margin-top:-5px;
    border-width: 1px;
    z-index: 999999999;
    top:0;
}

CSS for the current child div:

#big-title-list{
    padding:0;
    margin-left: 5px;
    margin-right: 5px;
    overflow: scroll;
}

The scrollbar appears but it doesn't scroll properly. I've tried several solutions from this page: Div with scrollbar inside div with position:fixed, but none of them seem to work in my case.

Here is the relevant part of the HTML code:

<aside id=asd1>
    <a href="/"><img class=virus style="margin-top:25px" src="{% static 'icons\virus.png' %}" alt="virus"></a>
    <div class=top-button-holder2>
        <button onclick="showtime2()" class=cmonbut ><span class=spanito3>today</span><span class=spanito2>&#9660;</span></button>
        </div>
    <ul id=big-title-list>
        {% for title in titles2 %}
        <li class=gundem>
            <a href="/today/popular/{{title.url}}--{{title.title_id}}">{{title.title}}---{{title.rating}}</a>
            {% if title.followed_count >= 0 %}
            <div class=title-amount><span class=left-sp>{{title.followed_count}}</span> / <span
                class=right-sp>{{title.amount}}</span></div>   
            {% else %}
            <div class=title-amount>{{title.amount}}</div>   
            {% endif %}
                
            
        </li>

        {% endfor %}
    </ul>
</aside>
javascripthtmlcss

Answer №1

Finally, everything is up and running smoothly, along with some additional recommendations:

aside{
  display: flex;
  flex-flow: column;
  position: fixed;
  height: 100%;
  width: 25%;
  border-right: 1px solid rgba(0, 0, 0, 0.2);
  z-index: 1; /* A single z-index value of 1 should suffice in the absence of other z-index elements */
  top:0;
  left: 0;
}
#big-title-list{
  flex: 1; /* Ensures it occupies all available vertical space */
  padding: 0;
  overflow: hidden;
  overflow-y: auto; /* Only shows vertical scroll when necessary */
  margin: 0;

  /* These two lines contribute to enlarging the content and triggering scrollbar visibility */
  font-size: 18px;
  line-height: 3;
}
<aside id=asd1>
    <a href="/"><img class=virus style="margin-top:25px" src="{% static 'icons\virus.png' %}" alt="virus"></a>
    <div class=top-button-holder2>
        <button onclick="showtime2()" class=cmonbut ><span class=spanito3>today</span><span class=spanito2>&#9660;</span></button>
        </div>
    <ul id=big-title-list>
        {% for title in titles2 %}
        <li class=gundem>
            <a href="/today/popular/{{title.url}}--{{title.title_id}}">{{title.title}}---{{title.rating}}</a>
            {% if title.followed_count >= 0 %}
            <div class=title-amount><span class=left-sp>{{title.followed_count}}</span> / <span
                class=right-sp>{{title.amount}}</span></div>   
            {% else %}
            <div class=title-amount>{{title.amount}}</div>   
            {% endif %}
                
            
        </li>

        {% endfor %}
    </ul>
</aside>

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

Transfer the iteration's value to the function's parameter

Recently delving into angular js and hoping to achieve this. Here is a snippet of my code: <tr data-ng-repeat="element in awesomeThings"> <td ng-click="getServiceDetails()"> <a href="#"> {{element}} </a ...

javascriptangularjs

Using Selenium, effortlessly upload JPEG images through the Selenium webdriver

Sample HTML Code: <form id="frmUploadVisualAsset" enctype="multipart/form-data" method="Post" action="uploadVisualAsset" novalidate="novalidate"> <input id="slideIdForAsset" type="hidden" name="slideIdForAsset"> <input id="course ...

htmlselenium

Incorporating tags into the react-select component

https://i.sstatic.net/Fsknq.pngI am still a beginner in the world of react-js. Currently, I am experimenting with the following: https://i.sstatic.net/4Ggoz.png This is what I have attempted so far: const options = [ { value: 'chocolate', ...

javascriptreactjsreduxbootstrap-4react-redux

Issues with Javascript functionality on aspdotnetstorefront site

Lately, I've been facing some challenges with my Javascript and jQuery codes when trying to implement them in the storefront. Despite attempting different methods to create a slider, none seem to work within the store environment - even though they fu ...

javascriptjqueryaspdotnetstorefront

The CSS grid-template-area feature is not functioning properly in web browsers

Struggling with creating a responsive CSS grid layout for different screen sizes. I want to have five divs on desktop screens and adjust the layout for smaller screens. As a newbie in web development, I'm finding it challenging to get it right. .fir ...

htmlcsscss-grid

Create a 2x2 HTML table where the first row remains undivided

I am working with an HTML table that is 2x2. Within this table, I am trying to achieve a layout where the first row consists of only one cell that spans the full width of the table, without being divided into two parts. ------- | | ------- | | | -- ...

htmlhtml-tablecell

Unable to make a jQuery Ajax HTTP Request within a Chrome extension

I'm facing an issue with sending a jQuery Ajax HTTP Request within google chrome extensions. I have already imported the jQuery library and used the following code: $.ajax({ method: "PUT", url: "https://spreadsheets.google ...

javascriptjqueryajaxgoogle-chromegoogle-chrome-extension

Leverage a JavaScript function to manipulate the behavior of the browser's back button

Is there a way to trigger the Javascript function "backPrev(-1)" when the back button of the browser is clicked? Appreciate any help, thank you. ...

javascriptjquerybrowser

Retrieving a variable within a try-catch statement

I am trying to implement a function: function collect_user_balance() { userBalance = 0; try { var args = { param: 'name'; }; mymodule_get_service({ data: JSON.stringify(args), s ...

javascriptjquerydrupal-7return-value

React Alert: It is important for every child within a list to have a distinct "key" prop, not due to a missing key in the map

My current project involves developing a React 18 application. While working on one of the pages, I encountered the following error: https://i.sstatic.net/9Mk2r.png I am aware that this type of error is often linked to the absence of a unique key in the m ...

javascriptreactjstypescriptdomredux

Ensure modifications to a variable are restricted within an if statement

I am struggling to find a way to globally change a variable within an if statement and ensure that the modifications persist. User input: !modify Bye var X = "Hello" if (msg.content.includes ('!modify')) { X = msg.content.replace('!modi ...

javascriptnode.jsbots

Is it possible to create a React Component without using a Function or Class

At times, I've come across and written React code that looks like this: const text = ( <p> Some text </p> ); While this method does work, are there any potential issues with it? I understand that I can't use props in this s ...

javascriptclassreactjscomponentsstateless

Ways to display an icon upon hovering or clicking, then conceal it when the mouse is moved away or another list item is clicked using ngFor in Angular 7

Within a simple loop, I have created a list with multiple rows. When a row is clicked or hovered over, it becomes active. Subsequently, clicking on another row will deactivate the previous one and activate the new one. So far, everything is functioning c ...

htmlcssangular

How can you enhance your HTML elements by incorporating classes and other features?

At this moment, the code I have is: var carDiv = $("<div/>").appendTo("#content"); var eUl = $("<ul/>").appendTo(carDiv); How can I transform it into <ul data-role="listview"> content </ul> Instead of <ul> ...

javascripthtmlappend

Exploring the various viewport sizes in Bootstrap breakpoints

I'm currently working on a responsive cropping tool for multiple devices using cropperjs. Right now, I am estimating the viewport sizes for each bootstrap breakpoint but I need to determine the actual height in order to establish a ratio. You can view ...

javascripttwitter-bootstrapbootstrap-4cropperjs

After setting up a Mongoose schema for authentication, how can I effectively perform database queries with MongoDB?

After successfully setting up authentication for my node.js (Express) app using Passport-local and Mongoose schema, I organized the folder structure as follows: app - app.js - config - auth.js - keys.js - passport.js - models - User.js - ...

javascriptnode.jsmongodbexpressmongoose

Top recommendations for implementing private/authentication routes in NextJS 13

When working with routes affected by a user's authentication status in NextJS 13, what is the most effective approach? I have two specific scenarios that I'm unsure about implementing: What is the best method for redirecting an unauthenticated ...

javascriptreactjstypescriptauthenticationnext.js

I am struggling to activate the hovering feature on my menu bar

I am having trouble making the hover effect in my navigation bar work properly. Even though I can separately make the 'display: none' and hover effects work, they do not function together. I am unsure of what mistake I might be making. Below is ...

cssdrop-down-menuhover

What steps should I follow to install nodemon on my Windows 10 device?

Currently, I am utilizing the bash console on my Windows 10 system. My goal is to install nodemon using node.js, but when attempting to do so, I encounter this error message: sudo: npm: command not found It's puzzling because I should already have n ...

javascriptnode.jsexpressnpmnodemon

What is the best way to extend the lower row items in a flex box to accommodate additional content when clicked?

My latest project involved designing an HTML flex-box to showcase images retrieved from an API. Here is a sneak peek of the layout: [![Preview of the flex-box layout][1]][1] However, I am now seeking to enhance user experience by adding functionality tha ...

javascripthtmlcssreactjsflexbox