Steps to create an HTML list that can be scrolled:

I have designed an HTML list that looks great. However, the issue arises when the list becomes too long - it exceeds the height of the page and there is no scrollbar to navigate through the rest of the list. To address this problem, I need to make the list scrollable along the y-axis. Below you will find the HTML and CSS code for reference:

HTML

 <section class="demo">
    <dl class="list maki">
        <dt>Errors</dt>
        <dd><a href="#"> Name1 </a></dd>
        <dd><a href="#"> Name2 </a></dd>
        <dd><a href="#"> Name3 </a></dd>
        <dd><a href="#"> Name4 </a></dd>
        <dd><a href="#"> Name5 </a></dd>
        <dd><a href="#"> Name6 </a></dd>
    </dl>
</section>

CSS



*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body:before {
    position: absolute;
    content: '';
    opacity: 0.8;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
}

...
htmlcss

Answer №1

To enhance the styling of your dd tag, enclose it in a parent element and apply the overflow property with a specific height.

body:before {

    position: absolute;
    content: '';
    opacity: 0.8;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
}
...
/* Additional CSS code continues here */
...

<html>
<body>
<section class="demo">
<dl class="list maki">
<dt>Errors</dt>
            <div class="lists__error">
            <dd><a href="#">    Name1   </a></dd>
            <dd><a href="#">    Name2   </a></dd>
            <dd><a href="#">    Name3   </a></dd>
            <dd><a href="#">    Name4   </a></dd>
            <dd><a href="#">    Name5   </a></dd>

<!-- More list items -->

            </div>
 </dl>
    </section>
</body>
</html>

Answer №2

implement the overflow-y: scroll;

here is an illustration:

dl{
  overflow-y: scroll;
}

just a heads up, the additional css codes provided are not relevant to the query

Answer №3

Set the parent class to relative and add the absolute class of list__maki, then apply overflow-x:hidden; overflow-y:scroll;

Tip: Consider adding hover effects to enhance the visual appeal of items in the list.

Appreciate it.

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

Interactive state for associated product within list without order

I am currently working on a project that involves an unordered list with separate list items. The menu design includes product images in the top list item and the corresponding product names in the list item below. I have successfully implemented a hover s ...

javascriptjqueryhtmlcssonmouseover

Is there a method to use media queries to dynamically switch JavaScript files based on the user's device?

I've been working on optimizing the mobile layout of my website, and while I have successfully implemented a media query with a different stylesheet for mobile devices, I'm struggling to determine if it's feasible to also load a separate Jav ...

javascriptcssmedia-queries

Responsive div not displaying background image

Here is a straightforward and easy-to-understand code snippet: HTML markup: <div class="jumbotron text-center top-jumbotron"> </div> CSS: .top-jumbotron { background: #ffcc00; background-image: url('../../bootstrap/img/home-pag ...

htmlcssresponsive-designbackground-image

- The click function is failing to work after an ajax call [Potential event delegation problem]

I have a webpage where I update the contents of an unordered list using $.get() every 5 seconds. The issue I am facing is that the click function for the list items is not working properly. Even though the list items are being updated correctly, there se ...

javascriptjqueryhtml

Could it be a mistake causing Echo to fail in fetching information from advanced custom fields?

When setting up in-content advertising for my blog posts on WordPress, I wanted the ads to point towards other sections of my site. Everything was working fine with the shortcode [in-content] pulling the most recent post from the 'advertising' cu ...

phphtmlwordpressif-statementadvanced-custom-fields

Strange glitch in the rendering of rectangles on HTML5 canvas?

While experimenting with pre-rendering sprites using HTML5 canvas, I encountered some strange behavior that appears to be a rendering bug. The issue can be seen in the following minimal example: var CT = document.getElementById("myCanvas").getContext("2 ...

javascripthtmlcanvas

Show only child elements of a specific type within the parent div

Looking to identify divs with the class 'test' that contain only buttons in their child nodes. This is the HTML code that needs to be filtered. <div class="test"> <div> <button> <span>Button 1</span></butto ...

javascriptjqueryhtmljquery-selectors

utilizing a Bootstrap modal element throughout multiple HTML documents

I have a bootstrap modal dialog div that I want to use in all 4 html pages of my web application without repeating the code. I have a common JavaScript file for this purpose. What is the best way to achieve this? <!-- Modal --> <div class="modal ...

javascriptjquerycsstwitter-bootstrap

Tips on how to showcase list items in a horizontal manner while maintaining consistent spacing and ensuring they are

I have a list of items denoted by the "li" tag, and I am looking for a way to display them horizontally or in a neat format. Below is the HTML code snippet: <!doctype html> <html lang="en" ng-app="app"> <head> ... </head> <bo ...

jqueryhtmlcss

Navigating the complexities of applying CSS exclusively to child grids within Kendo Angular may seem challenging at first

This image illustrates the grid layout I have created an angular UI using kendo that features a nested grid. I am trying to apply CSS specifically to the child grid without affecting the parent grid. However, no matter what CSS I write, it ends up being a ...

cssangularkendo-grid

Why is the line height dimension missing from my model box when padding and margin are both set to 0?

I'm currently working on a project involving CSS/HTML and using Bootstrap 4 for my layout. I have a menu where I want the boxes to be the same size as the font-size, so I've set the margin and padding to 0. .menu-ppal { display: inline; li ...

htmlcsstwitter-bootstrapbootstrap-4

Adaptable CSS triangle design

Hello I'm looking to create a responsive CSS triangle similar to the image linked below. I attempted using percentages with border width, but didn't achieve the desired outcome. Can anyone suggest a simple solution? https://i.stack.imgur.com/Yah ...

htmlcsstwitter-bootstrap

Unable to receive any feedback after sending values via AJAX and Flask

Exploring the realms of AJAX and Flask, I reached out for guidance on how to seamlessly pass values and display them without refreshing the page. A helpful pointer led me to Ajax implementation but encountered a peculiar error after customizing the suggest ...

javascriptpythonhtmlajaxflask

Strange occurrences observed with the interaction of multiple CSS classes

Recently, I encountered a situation with a class that had me puzzled. .lifetime .containerrow { text-align: center; height: 20px; } To enhance the appearance of certain elements by making their text bold, I attempted the following: .lifetime .co ...

cssclassstyles

Having issues with Bootstrap 5 modal not functioning correctly?

I'm facing an unusual issue that I'm struggling to resolve. I'm currently utilizing Bootstrap 5 and encountered the following problem: const reportBtns = Array.from(document.querySelectorAll('.report')) reportBtns.forEach((btn) ...

javascripthtmlbootstrap-4bootstrap-modal

Retrieving particular excerpts from a block of text that includes the keyword "javascript."

I have a chunk of string containing HTML source code. Currently, I am trying to read specific tags that I need using JavaScript. Since I am new to programming, I'm unsure how to proceed. Can anyone assist me with this? The issue lies in the following ...

javascripthtmlregextags

VueJS is utilized to duplicate the innerHTML output value

Currently diving into the world of Vue, I encountered an issue while rendering an HTML text. My component template is a WYSIWYG editor. <template> <div id='editor_container'> <slot name="header" /> <div id='editor ...

javascripthtmlvue.js

The Jquery tooltip does not correctly track the mouse movement across all div elements

Previously, I encountered an issue with the Jquery Mousemove feature not working properly on tooltips within divs in a 14 column 960 grid system. Now, although they work to some extent, they only follow my mouse up to the 7th or 8th column width. When scro ...

jqueryhtmlcssmousemove960.gs

How can I align two inner boxes vertically in the most efficient manner?

.dd{ height:100px; width:100%; border:1px soild red; background:#000; } .dd .d1{ height:20px; width:20px; border:1px solid green; display:inline-block; } .dd .d2{ height:20px; width:20px; border:1px solid green; display:inl ...

javascriptcssalignmentvertical-alignment

Is there a way to incorporate a delete button for each li element that is included in my list?

I have successfully implemented a to-do list where clicking on an item strikes a line through it and there is a delete button that works. However, I am looking for assistance on how to create a delete button for each newly added li item. var button = do ...

javascripthtmlcss