This box is designed to be slim and vertical, perfect for holding just a small amount of content. But don't worry, a handy scrollbar will

Question

This box is designed to be slim and vertical, perfect for holding just a small amount of content. But don't worry, a handy scrollbar will

Looking to create a scrollable box with Bootstrap 4 that adjusts its height based on content? Check out the images below for reference:

https://i.sstatic.net/BTVpi.png

The goal is to eliminate unnecessary vertical white space, like in this example:

https://i.sstatic.net/2TPoO.png

Current HTML code being used:

    <div class="col-sm-3">
      <h2>Domains (258)</h2>
      <ul class="overflow-auto domain-list">
        <li><a href="...">1bh3A00</a></li>
        [...]
        <li><a href="...">8prnA00</a></li>
      </ul>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
      <a href="....csv"><button class="btn"><i class="fa fa-download"></i> Domains CSV</button></a>

CSS code currently in use:

.domain-list { height: 30em; }

Struggling to find a solution? Let's brainstorm and make it work seamlessly together!

css bootstrap-4

Answer 1

Answer №1

To make your container scrollable when the content exceeds a certain height, you can use the max-height property instead of specifying a fixed height. This way, the container will expand to fit its contents but not exceed the maximum height set. Here is a simple example: once the 7th row is added, the container will become scrollable as it contains more content than the allowed max-height.

let rowNumber = 2;

document.getElementById('add').addEventListener('click', function() {
  const newRow = document.createElement('div');
  newRow.classList.add('row');
  newRow.innerText = `Row #${rowNumber++}`;

  document.getElementById('list').appendChild(newRow);
});

.list {
  max-height: 120px;
  background-color: red; 
  overflow-y: auto;
}

.row {
  height: 20px;
  line-height: 20px; /* this is optional and just for text alignment in the example */
  background-color: #ccc;
}

.row:nth-child(even) {
  background: rgb(15, 156, 250);
}

<html>

<head>
  <meta charset="UTF-8" />
  <link rel="stylesheet" type="text/css" href="styles.css" />
</head>

<body>
  <div id="list" class="list">
    <div class="row">Row #1</div>
  </div>
  <hr />
  <button id="add">Add row</button>
  <script src="script.js"></script>
</body>

</html>

Answer 2

To make your container scrollable when the content exceeds a certain height, you can use the max-height property instead of specifying a fixed height. This way, the container will expand to fit its contents but not exceed the maximum height set. Here is a simple example: once the 7th row is added, the container will become scrollable as it contains more content than the allowed max-height.

let rowNumber = 2;

document.getElementById('add').addEventListener('click', function() {
  const newRow = document.createElement('div');
  newRow.classList.add('row');
  newRow.innerText = `Row #${rowNumber++}`;

  document.getElementById('list').appendChild(newRow);
});

.list {
  max-height: 120px;
  background-color: red; 
  overflow-y: auto;
}

.row {
  height: 20px;
  line-height: 20px; /* this is optional and just for text alignment in the example */
  background-color: #ccc;
}

.row:nth-child(even) {
  background: rgb(15, 156, 250);
}

<html>

<head>
  <meta charset="UTF-8" />
  <link rel="stylesheet" type="text/css" href="styles.css" />
</head>

<body>
  <div id="list" class="list">
    <div class="row">Row #1</div>
  </div>
  <hr />
  <button id="add">Add row</button>
  <script src="script.js"></script>
</body>

</html>

This box is designed to be slim and vertical, perfect for holding just a small amount of content. But don't worry, a handy scrollbar will

Answer №1

Similar questions

Customize your Outlook emails with HTML and CSS to right-align content for a polished look

Implementing a watermark on a website - design and structure

Show or conceal input fields depending on the selection of radio buttons

Get rid of any unnecessary class on the element

The art of perfect alignment: Mastering the positioning of Material-UI Grid

Radio button - arranging the background image and text in alignment

Is Popper.js malfunctioning when bootstrap CSS is included?

Ways to eliminate the blue outline on a checkbox in bootstrap 4.1

Inject an external page within a DIV container to limit the styling effects of the external page to just that specific area

Place the <span> element at the bottom of the <ul> list

Discovering the center of an element and implementing a left float

Transforming the sentence into a particular keyboard symbol

Position absolute at the bottom must not disrupt the text's natural flow

The HTML Search Bar is Misaligned

Navigation isn't aligning correctly on the right side

CSS animation not working properly on mobile browsers due to custom code

How can I troubleshoot an image not appearing in Bootstrap within a Laravel Blade file while using PHPStorm?

In this guide, we will explore the process of designing unique styles for ng

The animations in my CSS are not functioning properly on iOS gadgets

Organize elements in a grid using CSS styling