Achieve a full vertical span of the Bootstrap 5 grid row to encompass all of its content

How can I ensure that a Bootstrap 5 grid row expands to fit its entire content vertically? Adding a label element causes the content of the first row to overlap with the second row in the example provided below.

<!doctype html>
<html lang="en">
  <head>
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6a0805051e191e180b1a2a5f445a4458">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <style>
    .ql-container {
        box-sizing: border-box;
        font-family: Helvetica, Arial, sans-serif;
        font-size: 13px;
        height: 100%;
        margin: 0px;
        position: relative;
    }

    .ql-snow {
        box-sizing: border-box;
        border: 1px solid #d1d5db;
    }
    
    .ql-editor {
        box-sizing: border-box;
        line-height: 1.42;
        height: 100%;
        outline: none;
        overflow-y: auto;
        padding: 12px 15px;
        -o-tab-size: 4;
        tab-size: 4;
        -moz-tab-size: 4;
        text-align: left;
        white-space: pre-wrap;
        word-wrap: break-word;
    }
  </style>

  </head>
  <body>    
    <div class="container">
        <form class="my-3">
            <div class="row py-2">
                <div class="col-md-12">
                    <label for="txtBox" class="form-label">Title</label>
                    <div id="txtBox" class="ql-container ql-snow">
                        <div class="ql-editor">
                            <p>TESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTE</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row py-2">
                <div class="col-md-12">
                    next row
                </div>
            </div>
        </form>
    </div>
  </body>
</html>

https://i.sstatic.net/8zcXA.png

Edit 1: Smaller example

<!doctype html>
<html lang="en">
  <head>
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bedcd1d1cacdcaccdfcefe8b908e908c">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <style>
    .ql-container {
        height: 100%;
        position: relative;
        border: 1px solid #d1d5db;
    }
  </style>
  </head>
  <body>    
    <div class="container">
            <div class="row">
                <div class="col">
                    Title
                    <div id="txtBox" class="ql-container">
                            <p>
                            TESTESTESTTESTESTESTTESTESTESTTESTESTEST...
                            </p>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    next row
                </div>
            </div>
    </div>
  </body>
</html>
csstwitter-bootstrapbootstrap-5

Answer №1

This issue of overlapping elements is being caused by a specific style rule in your code:

  <style>
    .ql-container {
        height: 100%;
        ...
    }
    
  </style>

Additionally, the structure of your HTML is contributing to the problem:

              <div class="col"><!-- this is the parent element -->  

                Title <!-- the height of this text is causing the overlap -->

                <div id="txtBox" class="ql-container">
                  <!-- this element's height being 100% of the parent --> 
                </div>

              </div>

If you require the style rule for some reason not mentioned in your inquiry, there are two potential solutions:

            <div class="row">
              <div class="col">
                Title <!-- the height of this text will no longer cause overlap -->
              </div>
            </div>
            <div class="row">
              <div class="col"><!-- this is the parent element --> 
                <div id="txtBox" class="ql-container">
                  <!-- this element's height being 100% of the parent --> 
                </div>
              </div>
            </div>

Alternatively, you can try this approach:

            <div class="row">
              <div class="col-12">
                Title <!-- the height of this text will no longer cause overlap -->
              </div>
              <div class="col"><!-- this is the parent element --> 
                <div id="txtBox" class="ql-container">
                  <!-- this element's height being 100% of the parent --> 
                </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

Personalized hyperlink element with interjected spacing

I am currently in the process of designing a component library that is based on lit web components. However, I have a suspicion that my issue may not be directly related to Lit itself, but rather connected to shadow DOM. Within my link component, I have d ...

htmlcssweb-componentshadow-dom

What is the best way to add randomness to the background colors of mapped elements?

I am looking for a way to randomly change the background color of each element However, when I try to implement it in the code below, the background color ends up being transparent: { modules.map((module, index) => ( <div className='carou ...

javascriptcssreactjs

Automated scrolling effect within a container element

I am working on a div container named wrapper2 that houses a chat interface. Inside the container, there are five messages in a div called chatleft, each containing images. The height of the wrapper2 div is smaller than the combined height of all the messa ...

htmlcss

Hide the background when the modal appears

I have successfully implemented a jQuery CustomBox modal on my website. However, I am facing an issue with hiding the content div behind the modal once it pops up. My goal is to make the content div reappear after the modal has been closed. You can view a ...

javascriptjqueryhtmlcssmodal-dialog

Get Bootstrap 5.0.0 Alpha 2 up and running by installing it through the package.json file

Currently listed in my package.json file are the following devDependencies: { "devDependencies": { "axios": "^0.19", "bootstrap": "^4.5.0", "cross-env": "^7.0", "laravel-mix": "^5.0.1", "lodash": "^4.17.19", ...

npmnpm-installpackage.jsonbootstrap-5

Organizing an array of objects within MUI cards based on social media platforms

I'm currently developing an application that showcases athlete data in a grid layout using MUI Grid. The colored borders on the left side of each card are determined by the corresponding social network associated with that athlete. https://i.sstatic. ...

javascriptcssreactjsmaterial-uigrid

Remove the bootstrap styling from a section of the webpage

I am in the process of setting up a preview box for an HTML editor on one of my pages. I created a basic <div id="preview"></div> style container where I occasionally input my HTML source, which is working adequately. The issue arises when Boo ...

htmlcsstwitter-bootstrapfrontendcss-reset

Imagine a scenario where clicking on an image causes it to be rotated or

Could use some assistance figuring out what's missing here. I've added a random photo from Wiki, similar in size to the images I'll be working with. The images will vary in size, but I want them to always remain visible within the browser w ...

javascripthtmlcss

Learn the steps to update PHP headers on a specific website using AJAX

contactfrm.php <?php // Server side validation $name = $_POST['name']; $surname = $_POST['surname']; $bsubject = $_POST['subject']; $email= $_POST['email']; $message= $_POST['message']; $to = " ...

phphtmlcssajaxforms

Switch Button Hyperlink in HTML/CSS

I have the following code: document.addEventListener("DOMContentLoaded", function(event) { (function() { requestAnimationFrame(function() { var banner; banner = document.querySelector('.exponea-banner3'); banner.classList ...

javascripthtmljquerycssanimation

Transferring Text from Word to Expression using Copy and Paste

Whenever I try to copy and paste content from a Word document into Expressions Web, I encounter some strange behavior. Often, the top line gets placed in one <span> tag while the rest ends up in another <span> tag, causing a slight gap between ...

htmlcssmicrosoft-expression-web

Take a snapshot of an element using fixed element positioning

When it comes to extracting a sub image from a webpage using Selenium, I have found a reliable method. First, I capture a screenshot of the entire page and then extract the desired sub-image using the element's coordinates. Dimension elementDimension ...

javajqueryhtmlcssselenium

Words appear on the screen, flowing smoothly from left to right

I am trying to create a hover effect where a caption appears when an image is hovered over. The text should slide in from left to right, causing the container to grow along the X axis as the image is hovered over. I have managed to make the text appear on ...

csscss-transitions

Bring life to the process of adding and removing DOM elements through animation

I am seeking to provide an engaging and interactive experience for my users while ensuring responsiveness. To achieve this goal, I have decided to learn more about web development by creating a card game. My current setup involves clickable elements that ...

javascriptjqueryhtmlcssanimation

Unusual dark streak beneath the Wordpress emblem

I recently created my website using Wordpress and decided to use a PNG image (140*82 px) as the logo instead of the default "site-title". However, I encountered an unusual issue where a black line appeared just below the image. After checking my "header.ph ...

phphtmlcsswordpress

Icon overlapping text from Font Awesome

Although my contact form is working well, I have noticed that the text in the message area tends to overlap with the icon as more content is added. Initially, everything aligns perfectly, but as the text extends, it ends up overlapping with the icon. Can ...

htmlcssbootstrap-4

What is the best way to achieve consistent width in a material-ui card component?

How can I ensure that all these cards have the same width? https://i.stack.imgur.com/Ns3zw.png I'm experiencing an issue with achieving uniform card widths when using flexbox in material-ui. How can I resolve this? Is it necessary to utilize Grid fo ...

cssreactjsflexboxmaterial-ui

Automatic width table design

I am trying to position the "User ID" label closer to its value by aligning it to the right side, as shown in the picture below. I have attempted using additional colspan's but haven't been successful. The User ID can contain anywhere from 1 to 9 ...

htmlcsshtml-table

Please enter only numerical values using jQuery

Currently, I am facing a slight issue. My goal is to only run the code when the input characters are numbers. This is the snippet of code I have been working with: $(".jq-sales, .jq-variablecosts, .jq-fixedcosts, .jq-additional-sales, .jq-sales-units, .j ...

javascriptjqueryhtmlcssnumbers

Text enhancement with text-shadow in jQuery and CSS

Before I reached out, I had been searching for a solution. In the process of building my website, I decided to incorporate text-shadow. It seemed straightforward, but turned out to be more complicated than expected. I discovered that IE does not support ...

jquerycss