Adhesive side panel using Bootstrap 5

I've run into an issue while trying to make a side div sticky using Bootstrap 5. I applied the position-sticky class, but it doesn't seem to work as expected. Surprisingly, it works for the top div that I also want to stick. Adding fixed-top or sticky-top to the side div causes its height to expand and fill the parent container, which is not the behavior I desire.

<!DOCTYPE html>

<html>
<head>
    <title>
        Title
    </title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c0a2afafb4b3b4b2a1b080f5eef2eef2">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
</head>

<body>
    <div class="layout-wrapper layout-content-navbar">
        <div class="layout-container">
            <div class="layout-page">
                <div class="content-wrapper">
                    <div class="container-xxl flex-grow-1 container-p-y">
                        <div id="divMain">
                            <div class="row mb-3">
                                <div class="card card-action mb-4 col-md-12">
                                    <div class="card-header align-items-center position-sticky fixed-top" style="background:white;">
                                        <h5 class="card-action-title mb-0">Title</h5>
                                    </div>
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-md-3">
                                                <div class="position-sticky">
                                                    <div style="border:1px solid black;min-height:500px;">
                                                        I WANT THIS DIV TO BE STICKY
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-9">
                                                <h5>Data</h5>
                                                <h5>Data</h5>
                                                <h5>Data</h5>
                                                <h5>Data</h5>
                                                ...
                                                <h5>Data</h5>
                                                <h5>Data</h5>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="99fbf6f6edeaedebf8e9d9acb7abb7ab">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-IDwe1+LCz02ROU9k972gdyvl+AESN10+x7tBKgc9I5HFtuNz0wWnPclzo6p9vxnk" crossorigin="anonymous"></script>
</body>

</html>
htmlcsstwitter-bootstrapbootstrap-5

Answer №1

To ensure the parent height adjusts dynamically as more elements are added, you can set it to fit-content. Feel free to test the code below to see if it meets your requirements.

<!DOCTYPE html>

<html>
<head>
    <title>
        Title
    </title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="84e6ebebf0f7f0f6e5f4c4b1aab6aab6">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
</head>

<body>
    <div class="layout-wrapper layout-content-navbar">
        <div class="layout-container">
            <div class="layout-page">
                <div class="content-wrapper">
                    <div class="container-xxl flex-grow-1 container-p-y">
                        <div id="divMain">
                            <div class="row mb-3">
                                <div class="card card-action mb-4 col-md-12">
                                    <div class="card-header align-items-center position-sticky fixed-top" style="background:white;">
                                        <h5 class="card-action-title mb-0">Title</h5>
                                    </div>
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-md-3" style="position: sticky;top: 60px;height: fit-content;">
                                                <div class="position-sticky">
                                                    <div style="border:1px solid black;min-height:500px;">
                                                        I WANT THIS DIV TO BE STICKY
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-9">
                                                <h5>Data</h5>
                                                <h5>Data</h5>
                                                <h5>Data</h5>
                                                <!-- More data here -->
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4f2d20203b3c3b3d2e3f0f7a617d617d">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-IDwe1+LCz02ROU9k972gdyvl+AESN10+x7tBKgc9I5HFtuNz0wWnPclzo6p9vxnk" crossorigin="anonymous"></script>
</body>

</html>

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

Troubleshooting problem with text overlaying images upon hovering in CSS

Several months ago, I successfully implemented a cool effect on a Shopify website that I had designed. However, recently the client decided to switch to a new theme without my knowledge, and now one of my CSS tricks is no longer working. If you look at t ...

htmlcsshovercentering

Issue with Bootstrap 4 Navbar collapsing and not expanding again

Help needed! My navigation bar collapses when the window is resized, but clicking on the hamburger icon does not open it back up. I have included my code below. Can someone please provide guidance on how to expand the collapsed navbar? <html lang=&quo ...

javascripthtmlcssbootstrap-4

Experiencing strange behavior with floating labels in Bootstrap 5.3 on my Google Chrome browser (Version 123.0.6312.86 (Official Build) (64-bit))

Lately, I've observed an unusual behavior with BS 5.3 floating labels. Strangely, the placeholder is being displayed below the label text, which is not the expected behavior. On Google Chrome, the floating labels are appearing like this: https://i.ss ...

cssgoogle-chromebootstrap-5

Whenever I select the checkbox, it causes my Bootstrap modal pop-up to close unexpectedly

I have created a form in a modal popup with 5 checkboxes where autopostback is set to true. Whenever I click on one of the checkboxes, the modal popup automatically closes. I have also used an update panel and included ScriptManager.RegisterStartupScrip ...

jqueryasp.netsql-servertwitter-bootstrapcss

Click on an element using jQuery to apply a specific class to all other similar

I am looking to dynamically add a class to a DIV after clicking on an A element with the same class. Here is an example: <ul> <li><a href="#1" class="test1">1</a></li> <li><a href="#2" class="test2">2</a>< ...

javascriptjqueryhtmlcss

Troubleshooting the Checkbox Oncheck Functionality

Before checking out the following code snippet, I have a requirement. Whenever a specific checkbox (identified by id cfc1) is clicked, it should not show as checked. I have implemented the onCheck function for this purpose, but I'm struggling to fig ...

javascripthtmlreactjsmaterial-uiweb-component

What is the proper method for integrating the next.js Image component with the HTML <picture> element?

When it comes to optimizing images, Next.js offers an Image component that lazy loads images and includes a srcset for a particular image. However, there are instances where we need to serve different images based on the device being used (art redirection ...

htmlimagenext.js

Including files from different directories using PHP

I'm currently involved in a project for school. The index is functioning properly, however, when I click on 'Lab 1 Q1' located at labs/1/1.html, it does direct me to the page but my <?php include('/main-nav.php') ?> isn' ...

phphtmlwamp

Adding color dynamically to text within ion-card based on a regex pattern

My goal is to enhance the appearance of certain text elements by wrapping them in a span tag whenever a # or a @ symbol is detected, creating the look of usernames and hashtags on Twitter. Below is the code I am currently using: TS FILE: ngOnInit(): void ...

javascripthtmlcssangularionic-framework

transforming a div container into an inline element using CSS

Hey there! I'm facing an issue with CSS where I am trying to change a div tag into inline. <div id="menu1"> <ul> <a href="#"> <li> one</li> </a> <a href="#"> <li> two</li> </a> <a h ...

htmlcss

Error: The document object is not defined when attempting to access it within a

<script type="module" src="/scripts/navbar.js"></script> <script> async function fetchContent(e) { e && e.preventDefault(); const response = await fetch('https: ...

javascripthtmlweb-component

The media query designed for iPads with a minimum width will also be effective for Android devices

As I delve into the realm of editing CSS created by others, I come across a peculiar situation involving media queries specifically designed for iPads. While one query is intended for portrait orientation and another for landscape, they are causing havoc o ...

androidcssipadmedia-queriesdevice-width

Pictures without a set width

Hey there! I'm working on a responsive website and facing an issue with image resizing. When I shrink the screen size, the images also shrink along with it. How can I set a fixed width for the images? I tried switching from rem to px but that didn&apo ...

htmlcss

Ways to restrict access to resources

My static website is simple, but I am concerned that everyone has access to my assets. For example, when I go to www.mysite.com/assets in the browser, it shows: Index of /assets Parent Directory css/ img/ js/ Is there a way to display a 403 error page ...

html.htaccess

I can't find my unit test in the Test Explorer

I'm currently working on configuring a unit test in Typescript using tsUnit. To ensure that everything is set up correctly, I've created a simple test. However, whenever I try to run all tests in Test Explorer, no results are displayed! It appear ...

javascripthtmlunit-testingtypescript

Iterating through children of the target element using the .each() method in jQuery

Currently, I am looping through the elements and extracting the src attribute from the child element. This is the snippet of HTML code that I am working with: <noscript data-alt="super awesome"> <img src="http://farm9.staticflickr.com/8235/85 ...

javascriptjqueryhtml

Web page layout featuring fields set aside for completion with underlined formatting

As I work on an HTML document, I encounter a challenge with styling fields that need to be dynamically filled and underlined. Here is what I am aiming to achieve: "Applicant's Last Name:_________bar_____________ First Name:_________foo_____________" ...

htmlcss

What is the best way to prevent buttons from shifting when I enlarge the font size in HTML?

Is there a way to make buttons increase in size when hovered over without causing the other buttons to shift to the side? I've tried using the following code to achieve this but it's not working as expected: <style> button{transition-d ...

htmlcss

Arrange the text in a div element in a horizontal direction

While developing a friends list script for a website, I encountered an interesting UI issue in the chat section. When a lengthy chat message is added to the chat content div with the CSS attribute overflow: scroll, it causes the div to stretch out horizont ...

htmlcss

Modifying column layout within an HTML webpage

I'm seeking advice on modifying a code. I'd like to keep it the same as it is now, but with one change - I want to decrease the width of the main video box and add another one beside it with an iframe code for a chatbox. Here's the current c ...

javascripthtml