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

Unable to choose fields and options within the popup box

Interacting with jQuery: $("#type_name").click(function(){ $("body").append('<div class="modalOverlay">'); $("#add_form").fadeIn(1000); $("#first_name").val(""); $("#email").val(""); ...

javascriptjqueryhtmlcsspopup

The importance of CSS styling links: the difference between a:link, a:visited and simply using a

Curious about the difference between using: a { ... } versus a:link, a:visited { ... } ...

css

Can an image map be utilized within an <a> element?

I am attempting to implement an image map within an <a> tag. It seems to be functioning correctly in Chrome, but I am encountering issues with it not working in Internet Explorer. Is it acceptable to use an image map in an <a> tag? Below is th ...

javascripthtmlcss

Unable to adjust dimensions with CSS width and height properties

I'm currently working on developing an online game with a login screen inspired by Paper.io. I have created the username input and play button, but there seems to be an issue with the width and height specified in the CSS file for the input field. Eve ...

javascriptcsshtml

Place your cursor over the following element to take control

There is a paragraph that needs to be clipped when hovered over. An issue arises where the H1 text shifts its position. Only the phrase "HOVER ABOVE PARAGRAPH" should be concealed. * { margin: 0; box-sizing: border-box; } .wrapper { displ ...

htmlcsshover

Missing CSS in dynamically loaded content on IE

I have been searching everywhere, but I just can't seem to find a satisfactory answer to this particular question. Whenever I load a few items on the page, they are displayed correctly at first. However, if a user decides to change the language, the ...

htmlcssajaxinternet-explorerdynamic

Can you please elaborate on how the CSS properties: -webkit-border-radius and border-radius are utilized?

What is the reason for having different values of 25px for -webkit-border-radius and border-radius in various positions? table.cal{ color: #064525c; border-spacing: 0; border: 3px solid black; -webkit-border-radius: **25px 25px** 0 0; ...

css

Is there a problem with using Nth-Child / Nth-Of-Type in CSS when classes are dynamically added or removed using jQuery?

Currently, I have a set of LI tags. As users filter the LIs, some may be removed from view. My goal is to assign alternating background colors to the visible LIs. When an LI is visible, it is given the class "LI-Shown." If an LI gets filtered out, I remov ...

jquerycsscss-selectors

Does the sliding transition between views function properly, even though the view appears on top of the header and behind the footer

My angular app is running smoothly, but now I want to add animations between views. When a user clicks on a link in the navbar, I want the view to slide to a different one. I was inspired by this example: Sliding between views. However, when I implemented ...

htmlcssangularjsng-animateangularjs-view

The overflow:hidden feature is ineffective in Firefox, yet functions properly in both IE and Chrome browsers

I'm in the process of creating a webshop and facing an issue with my sidebar due to varying product counts on different pages. For now, I have implemented the following workaround: padding-bottom: 5000px; margin-bottom: -5000px; overflow: ...

htmlcssfirefox

CSS: Creating a block that stretches the entire width of its parent block

I've been facing the same issue multiple times. Whenever I use the float property to display one block, the next block ends up overlapping with the first one. For example: Consider the following block of code: .row_item{ width: 30%; display: block; ...

htmlcsscss-float

Making sure that a footer div is consistently positioned at the bottom of the container div, regardless of the dimensions of the other elements

I am facing a challenge with a container div which has child elements. <div class='wrapper'> <div class='content'></div> <div class='footer'></div> </div> The height o ...

htmlcssfooter

``In Internet Explorer, the function to swap the image source when hovering over the parent element

I'm trying to make it so that when I hover over the parent (Li) tag with my mouse, the src attribute of the child img tag changes. This code works correctly in Chrome but not in Firefox and Internet Explorer. <li class="player"> . . //some c ...

javascriptjqueryhtmlcss

Production environment poses a challenge as Rails 4 struggles to locate fonts

Situation: I am facing an issue with my Rails 4.0.0 application deployed using capistrano, where the asset precompilation does not work properly on my production server. Challenge: Despite successfully adding a font and using it with @font-face locally, t ...

cssruby-on-railsfontsfont-faceproduction

The side navigation panel transition is stuck and failing to slide out as intended

My element is able to slide in smoothly, but encounters trouble when attempting to slide back out. I suspect the issue lies within the syntax for "display: none". Any assistance or recommendations would be greatly appreciated, and feel free to request more ...

javascripthtmlcss

How can a CSS class be inherited from a different file?

I have defined a class for styling a button: .client-header button { /*Properties*/ } And I also have a class to indicate when the menu is open: .client-menu-open { /*Properties*/ } My goal is to change the background of the button depending on ...

css

What is the reason for the website allowing me to scroll towards the right?

I'm encountering a strange issue with my code that I can't seem to figure out. The website keeps letting me scroll to the right as if there's an image or something off-screen, even though there isn't anything there. Any idea why this is ...

htmlcss

What is the best method for styling arrays displayed by React in version 15 using CSS?

React v15 has made a change where elements of arrays in JSX are now rendered as <!--react-text:some_id-->text<!--/react-text--> instead of spans. I've searched for a solution but haven't been able to figure out how to apply CSS styles ...

javascriptcssreactjs

Concealing specific DIV elements (unfortunately not nested)

Currently, I am dealing with pre-existing code that is automatically generated and needs to adhere to a specific format: <div id="TITLE1"></div> <div id="div-1"></div> <div id="div-2"></div> <div id="div-3"></d ...

javascriptjquerycsshtml

Is there a way to customize the checkout page using JavaScript?

I'm working on a checkout page where fields need to change based on a selected radio button. There are two options: A and B. When A is selected, I want certain fields to remain visible while others disappear, and vice versa for option B. Although I p ...

javascripthtmlcsswordpressweb