What is the best way to limit the size of a scrollable list while also allowing it to shrink when there is not enough content?

I'm currently developing a details page that is pulling information from a database. This details page has the potential to display related data from two other tables, each of which could have zero or multiple records to show.

The layout I am using (utilizing Bootstrap) is as follows:

<div class="scrolling">
    <h2>First Group of Records</h2>
    <ul class="list-group">
        <li class="list-group-item">
            Details of related record
        </li>
        ...
    </ul>
</div>
<div class="scrolling">
    <h2>Second Group of Records</h2>
    <ul class="list-group">
        <li class="list-group-item">
            Details of related record
        </li>
        ...
    </ul>
</div>

The CSS style for the scrolling class is:

.scrolling {
    height: 30%;
    overflow-y: scroll
}

This setup is functional and provides me with most of what I need, but I would like the scrolling divs to contract if the extra space is unnecessary. Is there a way to achieve this using existing Bootstrap functionalities or additional CSS?

htmlcssbootstrap-4scroll

Answer №1

After some additional research on Google, I was able to find the solution I needed:

.scrolling {
    height: 30%;
    resize: both;
    overflow-y: scroll;
}

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

Enhance the appearance of your HTMLEditorField in SilverStripe 3.2 by customizing its CSS style using

I have configured the HtmlEditorConfig for a Content HTMLEditorField. The issue I am facing is that I have to refresh or reload the browser page in order to see my custom CSS settings... Here is my code: HtmlEditorConfig::get('cms')->setOpti ...

cssfieldsilverstripe

Scripting events in JavaScript/jQuery are failing to trigger on elements located inside nested <div> containers

I am currently developing a simple RSS reader application where, upon clicking a 'story', the relevant information is displayed in a modal view. The 'stories' or RSS feed items are presented in a scrolling row. However, I have encounte ...

javascriptjqueryhtmlruby-on-railscss

Ensuring uniform height for bootstrap navbar links with added bottom border

I have styled my active menu class with a border-bottom. @media (min-width: 1040px) { #rbc-navbar.navbar-default .navbar-nav > li.active { border-bottom: 3px solid #56c7ff; } } However, when hovering over other links, they appear to be ...

htmlcsstwitter-bootstrap

The styles in the CSS file are not behaving as expected

Having an issue with my CSS file for the Header.js module. Despite writing rules, only one style is applying. Can anyone help me identify the problem? Thanks in advance! Header.js component import React from 'react'; import '../../../asset/ ...

cssreactjs

Ways to identify if the requested image is error-free (403 Forbidden)

One of my scripts loads an image from a specific source every 300 ms, but sometimes it receives a 403 Forbidden response. When this happens, the image element ends up blank. I want to find a way to verify if the image has received a valid 200 response befo ...

javascripthtml

Styling buttons with CSS in the Bootstrap framework

I am facing an issue with customizing buttons in Bootstrap. <div class="btn-group"> <button class="btn btn-midd">Link</button> <button class="btn btn-midd dropdown-toggle"> <span class="icon-download-alt icon-gray ...

cssbuttontwitter-bootstraphover

Utilizing JSON data retrieved from an API to populate a dropdown menu in HTML

When making a request to an API, I encountered the following error: https://i.sstatic.net/v6PVt.jpg Can anyone advise me on how to insert this into an html select field using jquery ajax? I want it to look something like this: <select> <o ...

jqueryhtmljsonajax

Include a floating element within a modal box

I am trying to display some cards within a Bootstrap modal form. Inside the modal, I want the cards to appear in two columns by using the "col-md-5" class. .mycard.col-md-5 card contents However, when I use the "col-md-5" class, it adds a property o ...

htmlcsstwitter-bootstrap-3frontend

Developing a fresh Outlook email using a combination of javascript and vbscript

I have created a custom HTML page with fields and a button to fill out in order to generate a new Outlook mail item. To format the body of the email using HTML, I am utilizing VBScript to create the new mail item. <script> function generateEmail() { ...

javascriptjqueryhtmlvbscriptoutlook

Retrieve a property from a designated element within the DOM

Is there a way to specifically extract the src attribute of the second image in an HTML file using PHP DOM parser? foreach($html->find('img[src]') as $element) $src = $element->getAttribute('src'); echo $src; I s ...

phphtmlparsing

What are the steps for me to generate my own unique HTML tag?

Is there a way to create my own custom HTML tags in HTML or HTML5 so that I can develop my unique HTML tag and CSS library like: <mymenu> ul li or some text </mymenu> <heading> Yeah My Own Heading</heading> If yes, please guide m ...

html

What is the best way to center kitchen sink cards horizontally using bootstrap?

I'm having trouble getting my kitchen sink cards to align horizontally. Here's a snapshot of the cards: https://i.sstatic.net/4JIXc.png. Despite trying various CSS and HTML codes, I can't seem to get them to align properly. One code I attemp ...

htmlcssbootstrap-5

Combining various viewpoints into one cohesive SVG

Is there a way to create multiple unique perspectives within a single SVG, or replicate that effect using smart grouping techniques? I aim to display various sections of a potentially extensive SVG without the need for multiple renderings. Is there a str ...

htmlsvg

What is the best way to insert a JavaScript variable into a filter while using ng-repeat?

I'm currently working on a situation where I have the following code: <div ng-repeat="i in MediaFeedItems | filter: { category: 'userSelect' }" class="mediafeed--item"> This specific code snippet is responsible for iterating through ...

javascripthtmlangularjs

A guide to implementing div wrapping in HTML

I'm in the process of using flexbox on my website. I have 10 div elements that I want to wrap around each other closely without any gaps between them. My goal is to have "4" positioned to the right of "1", instead of creating a new row and moving dow ...

javascriptjqueryhtmlcss

Sliding out the existing content and smoothly sliding in a fresh one upon clicking

Thank you for taking the time to read this. I've created a navigation bar and a few DIVs. What I want to achieve is when a button is clicked, the current DIV slides to the left and out of the page, while a new DIV slides in from the right. [http://w ...

jqueryhtml

What is the best way to add a button to the center of an image?

I need help with positioning a search button on top of an image. Currently, the button is appearing below the image and outside its boundaries. You can view the issue live at www.emeupci.com Below is the snippet of the HTML code: <div class="contai ...

htmlcssbootstrap-4

Issue with pre-selected checkboxes: JavaScript

A function was created to automatically check the first value of a checkbox when a page is loaded: function defaultCheck(){ document.checkBoxForm.list[0].checked = true; var val=document.checkBoxForm.list[0].value; showtotal[0] = docum ...

phpjavascripthtmlajaxcheckbox

Blurring a section of a circular image using a combination of CSS and JavaScript

I'm trying to achieve a specific effect with my circular image and overlaying div. I want the overlaying div to only partially shade out the image based on a certain degree value. For example, if I specify 100 degrees, I only want 260 degrees of the c ...

javascriptjqueryhtmlcss

How can we allocate array elements dynamically within div elements to ensure that each row contains no more than N items using only HTML and JavaScript?

For instance, if N is 3 in each row, as more elements are added to the array, the number of rows will increase but each row will still have a maximum of 3 elements. I am currently using map to generate corresponding divs for every element in the arr ...

javascripthtmlcss