What steps can be taken to avoid the row size reaching the height of the full page when there is an excess of elements?

I'm working on a Bootstrap(4) page with 3 rows that need to stay visible all the time. However, when I add elements to the middle row's column and they overflow, the entire row expands in height, overflowing into other rows.

Is there a way to prevent this from happening?

I've searched for solutions and tried different suggestions but so far, I've only made it worse.

Here's part of the code I've been using:

html,
body {
  height: 100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid h-100 d-flex flex-column">
  <div class="row h-100" style="background-color: grey;">
    top<br>
  </div>
  <div class="row h-100" style="background-color: yellow;">
    <div class="col-lg-9 h-100" style="overflow-y: auto;">
      something1<br> something2
      <br> something3
      <br> something4
      <br> something5
      <br> something6
      <br> something7
      <br> something8
      <br> something9
      <br> something10
      <br> something11
      <br> something12
      <br> something13
      <br> something14
      <br> something15
      <br> something16
      <br> something17
      <br> something18
      <br> something19
      <br> something20
      <br> something21
      <br> som...ontinued...
    </div>
    <div class="col-lg-1 h-100 bg-danger"></div>
    <div class="col-lg-2 bg-primary h-100">s1<br>s2<br></div>
  </div>
  <div class="row h-100" style="background-color: green;">
    bottom<br>
  </div>
</div>

htmlcssbootstrap-4

Answer №1

If the overflow of the row is not set, it will display everything. You can include the following code:

div.row {
  overflow: auto;
}

Please review the solution provided below:

html,
body {
  height: 100%;
}

div.row {
  overflow: auto;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid h-100 d-flex flex-column">
  <div class="row h-100" style="background-color: grey;">
    top<br>
  </div>
  <div class="row h-100" style="background-color: yellow;">
    <div class="col-lg-9 h-100" style="overflow-y: auto;">
      something1<br> something2
      <br> something3
      <br> something32
      <br> something3
      <br> something32
      <br> something3
      <br> something32
      <br> something3
      <br> something32
      <br> something3
      <br> something32
      <br> something3
      <br> something32
      <br> something3
      <br> something32
      <br> something3
      <br> something32
      <br> something3
      <br> something32
      <br> something3
      <br> something32
      <br> something3
      <br> something32
      <br> something3
      <br> something32
      <br>
    </div>
    <div class="col-lg-1 h-100 bg-danger"></div>
    <div class="col-lg-2 bg-primary h-100">s1<br>s2<br></div>
  </div>
  <div class="row h-100" style="background-color: green;">
    bottom<br>
  </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

The final position of the Angular increment animation does not hold

Is there a way to trigger an animation when the value of countAllOrders changes? Specifically, I am attempting to adjust the margin of a list using keyframes in an Angular animation. Here is my HTML code: <ul class="digits" [@ordersValue]=&q ...

cssangularangular-animations

Issue with position: fixed in IE9

If you visit this website and scroll down the page, you will see that the right panel with shopping and categories moves along with you... The script I am using for this functionality is: $(function () { var btn = $('.scroll'); var btn ...

jquerycssinternet-explorer-9

What is the right way to nest a SCSS rule for a specific selector within a list using the "&" symbol?

I have a question that I couldn't find the answer to in any documentation or on Stack Overflow. While this example may not be perfect, it should give you a basic understanding of what I'm trying to achieve. Illustration .btn-group { .btn ...

csssass

clicking on a hyperlink does not function properly the second time around

In my examples, the first one allows multiple clicks, while the second example only allows clicking once. <a href="index.php">First Example: Click me repeatedly</a> <a href="index.php?location=#menu">Second Example: Click me just once& ...

htmlhref

What is the proper way to apply justification in Chinese writing using a colon?

I attempted to use the following CSS: .td_justify{ text-align-last: justify; } However, the result I got was not what I desired. https://i.sstatic.net/gcSS1.png What I actually want is something like this: https://i.sstatic.net/WeyRy.jpg If I add < ...

javascripthtmlcssasp.net-mvc

React.js doesn't seem to be picking up any CSS files

I recently developed an app and encountered an issue with loading the CSS for a specific part of the template. The CSS file I am using is named styles.module.css: .my-page__title { font-weight: 300; font-size: 48px; margin-bottom: 15px; } .my-page_ ...

cssreactjsmaterial-ui

Ways to retrieve the chosen option in a dropdown list without specifying the dropdown's name, id,

Custom dropdown, Model-View-Controller Code @foreach (var attribute in Model) { string controlId = string.Format("product_attribute_{0}_{1}_{2}", attribute.ProductId, attribute.ProductAttributeId, attribute.Id); @switch (attribute.AttributeControl ...

javascriptjqueryhtmlasp.net-mvc

How to Retrieve Upload Progress via HTTP Request in PHP

Is there a way to monitor the progress of file uploads by accessing the HTTP request in PHP? If so, how can this be achieved when uploading files into a MySQL database? require('../connect_db.php'); //Collect all necessary data $name = $dbc-> ...

javascriptphphtmlmysql

IE encounters an absolute z-index problem when expanding concealed content

I'm having trouble with the positioning of a block (div). I am new to CSS, so any help would be greatly appreciated. Here is the code snippet: http://jsfiddle.net/9rEmt/ (please check it out) for viewing online in IE. When I use absolute for positio ...

javascriptjqueryhtmlcss

What could be causing the height of my Bootstrap row with Snook's Simple jQuery Slideshow to be zero?

I recently added Snook's Simple jQuery Slideshow feature to my Bootstrap 3 website. If you want to see it in action, click on this link: Oddly enough, the row containing the slideshow is not displaying correctly as its height is registering at 0. Th ...

jqueryhtmlcsstwitter-bootstrapslideshow

Issue with dropshadows in Chrome: Instead of applying the shadow effect to the graphic itself, it is mistakenly being added to the container

Having trouble adding a Gaussian drop shadow to an SVG path. The shadow is not applying correctly in Chrome - instead of just on the graphic, it's being added to the container. Works fine in ff though. Any suggestions on how to make this work properly ...

javascriptjquerycsssvg

Tricks to customize Liferay core CSS

Greetings! I am looking to customize a date picker CSS using a hook in Liferay. Link to relevant Liferay Documentation However, in the Liferay IDE, when creating a new hook, there doesn't seem to be an option for CSS customization in the liferay-hoo ...

cssliferayliferay-ide

Tips for centering a resized image within a container:

I adjusted the width and height to "max" for my images inside the container, and while wider images fit perfectly, taller ones seem to shift left of the container. I tried researching about adjusting using "max-width" but still facing issues. Here's t ...

javascripthtmlcss

Choose a particular form when the dropdown option is changed

I have two forms that I would like to display based on the selection from a dropdown menu. For example, if "Form1" is selected from the dropdown, then Form1 should be displayed. If "Form2" is selected, then Form2 should be displayed. Can anyone suggest h ...

javascriptjqueryhtml

Incorporating CSS animations into Vue.js while an API call is being made

When a specific icon is clicked, an API call is triggered: <i class="fas fa-sync" @click.prevent="updateCart(item.id, item.amount)"></i> I am looking to add an animation to rotate the icon until the API call is complete or ...

cssapivue.jsvuejs2vue-component

How do I incorporate pagination into a PL-SQL dynamic content table in Oracle Apex?

I've successfully created a PL-SQL dynamic content report in Oracle Apex, but I'm struggling with implementing pagination. With too many rows to display at once, adding pagination will greatly enhance the user experience. Here is a snippet of my ...

javascripthtmlcssplsqloracle-apex

If I choose a different option from the dropdown list, I would like a textbox to appear

Hey there, I have a list of industries and one of the options is "Other". When a user clicks on "Other", a text box should appear for them to specify. I'm struggling to make this work using Django AJAX. Any help would be appreciated! <div class ...

htmldjango

Tips to prevent flex from automatically adjusting based on text length: ensure the table remains a consistent size regardless of the length of the text within it

Is there a way to adjust the alignment of this code snippet? <div class="d-flex justify-content-between"> <span>Total Items: @Model.Count </span> <div class="d-flex flex-row align-items-center" ...

css

The loading speed of Javascript innerHTML is sluggish

Instead of manually updating my menu on multiple pages each time I wanted to make a change, I decided to use Javascript to dynamically recreate the menu. This way, I could simply update the script and have the changes reflected across all pages simultaneou ...

javascripthtml

Exploring ways to locate elements within an array using Selenium based on their class names

My task involves extracting text from a table that belongs to the "infoBoxContents" class. I specifically need to retrieve text from the third table of this class, but there are multiple tables with the same class name. The code snippet I have tried so far ...

javahtmlseleniumselenium-chromedriver