How to implement a scrollable section using Ant Design version 4

Looking to create a list with inner scroll and a search input at the top in antd4 and react. How can I achieve this like shown in the image below?

Example of a scrollable section sketch:

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

I have searched through antd components but couldn't find one that fits my need.

I want to avoid using the following code in CSS:

maxHeight: 200, overflow: 'auto'

Is there an alternative solution without having to write custom CSS? (Prefer to utilize antd components with minimal customization)

css reactjs antd scrollable

Answer №1

To create a scrolling antd list, all you need to do is define the height and overflow properties.

For example:

  overflow: auto;
  height: 300px;

Take a look at this official antd list CodeSandBox for a live code demonstration.

Also, be sure to explore other examples of lists in the antd List documentation.

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

Ways to initiate a transition upon clicking a button, causing it to switch from being hidden (`display: none`) to visible (`display: block`)

I'm attempting to create a smooth transition effect when a button is clicked, similar to a toggle function, where the content below it seamlessly shifts instead of abruptly moving. The classic example of this is the Bootstrap navbar hamburger menu, wh ...

javascript html css

What is the best way to move information from one table to a different one?

I have two tables: users2 and user_totals. Each of these tables has rows named clicks (impression_count), fclicks (use_count), and completed_stus (completion_count). The ones in brackets are the new additions in the user_totals table. I would like to tra ...

How can I turn off automatic ellipsis on my IOS device?

Currently, I am working on a web application that involves displaying location descriptions retrieved from an API. The issue I am encountering is that the description is being cut off with an ellipsis after a certain number of lines when viewed on an iPhon ...

html css ios typescript ionic-framework

Is it feasible to update just one key within an exported type using setState in TypeScript?

Recently, I decided to dive into Typescript within my React App and encountered an error that has left me stumped. I'm wondering if it's possible to access a specific key in an exported type and modify its value? Here is how I've exported ...

javascript reactjs typescript react-hooks setstate

issue with IE's (Internet Explorer) filter invert function not functioning

Why does the filter invert not work in Internet Explorer (IE)? <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> </script> <sty ...

jquery html css angular bootstrap-4

Enhanced functionality in MUI TablePagination now allows users to easily select their desired page

I've implemented MUI TablePagination to enable pagination in my table. The code is performing well, offering most of the features I need: Users can choose between displaying 5, 10, or 20 entries per page using a dropdown. The number of pages displaye ...

javascript reactjs material-ui pagination

I encountered a problem while integrating antd and moment.js in my React project

I am currently using the antd date-picker in my React project with TypeScript. Encountered an error: Uncaught Type Error: moment is not a function. If anyone has a solution, please assist me. .tsx file:: const dateFormat = 'MM-DD-YYYY'; < ...

reactjs typescript momentjs

What is the best way to adjust the footer width to match the sidebar using Bootstrap 5?

Currently working on a Bootstrap 5 template for my website, but being new to it makes it a bit challenging. Specifically struggling with aligning the footer to fit the full width of the sidebar. <!DOCTYPE html> <html lang="en"> <head&g ...

html css bootstrap-5

Tips for loading SG file on client-side rendered pages in Next.js

My Objective I aim to integrate the SG page, which is generated at build time, into the CSR page. app/ SG/[id]/product/page.tsx CSR/page.tsx (Next version is 14) The HTML output file of the CSR should be structured as follows: <div data-id=&quo ...

reactjs next.js static-site-generation

Generate a table containing information organized by category

I am looking to create a component Table that groups countries together. Here is my mockup: enter image description here I am struggling to find a solution for this issue. Can someone please assist me? ...

javascript html css vue.js

Endless re-rendering loop triggered by React form validation hook

Despite researching other solutions, I am still facing issues. My React hook for form input validation is causing an infinite re-render loop. Upon investigation, I found that the problem lies within the dependency array of the useEffect. Excluding the val ...

reactjs typescript react-hooks eslint

What is the best approach to creating an edit-file for combining different types of data in a React

Looking for guidance on updating an article along with an image? I'm currently working with a MERN-stack using Redux Toolkit. After successfully fetching data from the database into input fields using useEffect(), I encountered an issue when trying to ...

reactjs redux mern

Tips for making a stretch height block using CSS

Hello! Can anyone assist me with CSS styling without involving JavaScript? I am looking to set up the main block with a fixed or variable height, based on a percentage of its parent container, not the window height. <div class="main" style="height: 13 ...

Is it possible to use Lottie interactivity with the play function in React Native?

My goal is to create a Lottie animation that triggers only once when it reaches a specific visibility level. Currently, I am facing an issue where the animation loops using useLottieInteractivity, and I'm unsure how to make it play just once. Here&ap ...

reactjs react-hooks lottie

Fancybox 2 - CSS styles vanish when using Ajax request

I have a fancybox2 with static dummy content that has styling applied. It works fine, but now I need to load dynamic content via ajax. However, when I make the ajax call, the required content loads but loses all css styling, most likely due to changes in t ...

jquery html css ajax fancybox-2

Adjust the position of the select box slightly downwards to ensure it lines up with the preceding text in the HTML code

I am working on an HTML5 webpage and I am facing an alignment issue with the selection box. The selection box is currently not aligned with the text ("Select Discipline") that comes before it. I am looking for a way to adjust the position of the selectio ...

React has successfully installed react router, but unfortunately, I am encountering difficulty in getting the page

I'm currently in the process of setting up react router and I need help rendering the main page. Here is the current configuration in my index.js import React, { Component, PropTypes } from 'react'; import { Router, Route } from 'reac ...

javascript reactjs react-router

Learn how to personalize the Bootstrap carousel by keeping certain text elements static while others change with each background image

I am a beginner when it comes to using Bootstrap and I am seeking some guidance on how to make the following design concept a reality. Our goal is to have a carousel featured on our homepage, where the company name (aligned to the left) remains visible at ...

html css bootstrap-4

A step-by-step guide on implementing styled components in React.js with conditional statements

Embarking on my latest project with the goal of going "from Zero to Hero", I received a tip from a friend about styled components. Intrigued, I decided to ditch my traditional .css files and make the switch. Although I understand the basics - using <My ...

javascript html css reactjs

The grid images transition at set intervals using jQuery or another JavaScript framework

I am facing a challenge with developing an image grid that transitions some images at random intervals using either jQuery or another method in JavaScript. It's important to note that I don't want all the images to change simultaneously; each gro ...

javascript jquery html css

CSSer Q&A