scrollable list using bootstrap

<div class="panel panel-primary" id="result_panel">
    <div class="panel-heading"><h3 class="panel-title">List of Results</h3>
    </div>
    <div class="panel-body">
        <ul class="list-group">
            <li class="list-group-item"><strong>Signature Accommodations</strong>(1480m)
            </li>
            # many li here..
            <li class="list-group-item"><strong>The Barrington At Park Place</strong>(15210m)
            </li>
            <li class="list-group-item"><strong>Camden Huntingdon Apartments</strong>(15820m)
            </li>
            <li class="list-group-item"><strong>Enclave at Water's Edge Apartments</strong>(15830m)
            </li>
        </ul>
    </div>
</div>

Here is a snippet of my HTML code showing the list of results. I anticipate having many items in this list which may exceed the window size, https://i.stack.imgur.com/RJmyb.jpg

I attempted to adjust the CSS like so:

.list-group{
    margin-bottom: 10px;
    overflow:scroll;
    -webkit-overflow-scrolling: touch;
}

Unfortunately, this solution did not resolve the issue. Any suggestions for a fix?

csstwitter-bootstrap

Answer №1

Consider including max-height:

.list-group{
    max-height: 300px;
    margin-bottom: 10px;
    overflow:scroll;
    -webkit-overflow-scrolling: touch;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="panel panel-primary" id="result_panel">
    <div class="panel-heading"><h3 class="panel-title">Result List</h3>
    </div>
    <div class="panel-body">
        <ul class="list-group">
            <li class="list-group-item"><strong>Signature
                Accommodations</strong>(1480m)
            </li>
            <li class="list-group-item"><strong>Signature
                Accommodations</strong>(1480m)
            </li>
            <li class="list-group-item"><strong>Signature
                Accommodations</strong>(1480m)
            </li>
           <!-- additional list items -->
        </ul>
    </div>
</div>

Answer №2

Utilizing Bootstrap is the key to achieving this! The class overflow-auto makes it happen, along with some concise HTML style attribute details.

I have personally verified this on Bootstrap versions >= 4.6.x

Feel free to refer to the sample snippet below:

 <div class="list-group overflow-auto shadow" style="max-height: 100px;">
   <li id="item1">Item 1</li>
   <li id="item2"gt;Item 2</li>
   <li id="item3">Item 3</li>
   <li id="item4">Item 4</li>
   <li id="item5">Item 5</li>
   <li id="item6">Item 6</li>
   <li id="item7">Item 7</li>
   <li id="item8">Item 8</li>
   <li id="item9">Item 9</li>
   <li id="item10">Item 10</li>
   <li id="item11">Item 11</li>
   <li id="item12">Item 12</li>
   <li id="item13">Item 13</li>
   <li id="item14">Item 14</li>
   <li id="item15">Item 15</li>
 </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

Tips for changing color when hovering over elements in a CSS grid

I am currently attempting to incorporate a hover effect into this CSS grid, but I have not been successful in my efforts. I experimented with transition and opacity techniques, but they did not work as expected. Can someone please point out what I may be ...

csshovercss-grid

Is it possible to adjust the range of a range slider based on the selection of a radio button or other input method?

I have a query and I’m hopeful you can assist: function UpdateTemperature() { var selectedGrade = $( "input[name='radios']:checked" ).val(); $( ".c_f" ).text(selectedGrade); var value1 = $("#tempMin").val(); var value2 = $("#tempM ...

javascriptjqueryhtmlcssmaterialize

Don't forget to update the CSS stylesheet whenever templates are rendered in Flask

I have developed a Flask application using HTML and external (static) CSS stylesheets. One interesting feature of the application is a checkbox that uses JavaScript to toggle between two different CSS stylesheets - one for light mode and one for dark mode. ...

pythoncssflaskjinja2

Improper Alignment of Bootstrap 4 Navbar Link: Troubleshooting Required

Take a look at the image for the issue: https://i.stack.imgur.com/u9aCy.png As shown in the image, the NavBar links are stacked instead of being displayed in one row. This is the HTML code I have used: <!doctype html> <html> <head> ...

javascriptcssangularbootstrap-4

Rearrange the sequence of numbers using JQuery when an HTML element is deleted

I'm currently working on a simple functionality where I have 5 rows, each with its own number. So initially, the rows are numbered from 5 to 1. If I remove a value like 3, the sequence should adjust to 4, 2, 1, indicating that I now have only 4 rows ...

javascriptjqueryhtmlcss

Steps for aligning floating DIVs in the center of a parent DIV

Why is the text alignment not working as expected when I have three divs within a parent div that need to be center aligned? If you'd like to see the issue in action, check out this Demo fiddle <div class="container_alt"> <div class= ...

htmlcss

The section cannot be shown in a flex layout within a grid container

My goal is to showcase a grid layout containing multiple sections within a div, but I'm encountering an issue where the sections are only displaying as blocks. I am seeking assistance in making the second portion of the data appear flexed. Currently, ...

htmlcssvue.js

What is the best way to continuously loop an image from left to right and right to left indefinitely using JavaScript?

As part of the challenge, I am tasked with creating a Pacman game using HTML, CSS, and JavaScript. One key aspect is to control the movement of the ghosts throughout the game. However, I am facing an issue with the current function that controls the ghost& ...

javascripthtmlcss

The bottom border of the HTML header does not properly wrap around the Table of Contents (ToC), although the text within the header does. What steps

I have created a Table of Content (ToC) using a Div element and styled it with the following HTML and CSS: h3.articletitle { font-weight: bold; font-size: 30px; border-bottom: 1px solid #4F120B; } h4.articlesubtitle { font-weight: bold; ...

htmlcss

Implementing a CSS codepen within a React Material-UI component

I'm struggling to implement this effect on my material ui card component using react and makeStyles. I am having difficulty translating this effect to the cards, could someone assist me in simplifying it into a CSS code that can be used in MakeStyles? ...

cssreactjsmaterial-uicodepen

The hover effect flickers in Firefox, but remains stable in Google Chrome

Here is an example link to check out: I am facing a dilemma on how to solve this issue and unsure if it is related to jQuery or the DOM structure. If you have any suggestions, they would be greatly appreciated. Thank you! ...

jquerycsshtml

Tips for enabling background scrolling when Popover is displayed: (React, React Native, Native-Base)

I'm utilizing the Popover component from NativeBase to design my popover: const SettingsButton: React.FC<Props> = () => { return ( <Popover trigger={(triggerProps) => { return ( ...

htmlcssreactjsreact-nativenative-base

Leveraging createMuiTheme to customize default styles for divs, paragraphs, and the body element

Seeking guidance on customizing a Material UI Theme I aim to modify the default styles for elements like <body>. Currently, at the root of my React tree: import theme from './mui-theme' ReactDOM.render( <Router> <ThemePr ...

cssreactjsmaterial-uithemes

JavaScript function to toggle visibility and scroll back to top of the page

I have been an avid reader on this platform, and I am hoping that my question has not already been addressed. I am struggling to find a solution to a problem I am facing. There are two DIVs in my code that I toggle between showing and hiding using Javascr ...

javascriptjqueryhtmlcssshow

Simplified user interface for detecting radio button clicks

Currently working on a form that includes radio buttons, where an update function is triggered whenever there is a user input change. The challenge I am facing is how to incorporate user-friendly radio buttons with a larger button area encompassing both t ...

javascripthtmlcss

Demo showcasing the issue with the side navbar in Bootstrap not functioning as expected

I'm currently working on implementing a side nav bar using the code snippet from this link: However, when I integrate this code into my application, the left nav bar only extends to the height of the links, and the content area begins after the left ...

jqueryhtmlangularjstwitter-bootstrap

How does CSS affect the size and performance of a website?

Examining the content of this css file (focusing on the last 5 lines specifically): #page section .s_1 { overflow:hidden; width:435px; float:left;} #page section .s_1 h1 { font-size:36pt; color:#001744; line-height:1.1; margin-bottom:64px;height:107px;} # ...

htmlcssperformance

What steps can be taken to ensure that a box is the exact same size

Is it possible to make two of my main buttons the same size? I'm just starting out in web development and could use some guidance. Below is the HTML and CSS code I currently have for my index.html: <body> <div> <img src="img/projec ...

htmlcss

What is the best way to position an image in the bottom right corner of a fluid div container?

I am struggling to position this icon image at the bottom right hand corner of this div, so that it appears as if the message is originating from the icon's head. Despite my efforts, I have yet to find a definitive solution. https://i.stack.imgur.com ...

htmlcssangularjsimage

What CSS attribute determines the distinction in visual presentation between two elements that share the same CSS configurations?

In the HTML code below, there is a button and a div with the same class and content: <div class="root"><!-- --><button class="outer"><div class="middle"><div class="inner">label</div></div></button><!-- - ...

cssdebugging