The unique design of the list extends beyond the boundary line

In my current project, I am utilizing next.js and MUI (material-ui). The component I am working with has the following structure:

<Paper>
  <List>
  ..
  </List>
</Paper>

One issue I am facing is that when the list is scrolled, the select style of the <ListItemButton> component goes outside of the component's rounded border.

https://i.stack.imgur.com/pXvO8.jpg

I am looking for a way to apply border-radius to the <ListItemButton> component so that it looks natural even when scrolling occurs. Alternatively, are there any CSS tricks or solutions that could help with this problem?

cssreactjsmaterial-ui

Answer №1

To resolve the issue, you need to ensure that the wrapper has the CSS property overflow: hidden applied (MDN). This prevents the background color from bleeding out of the child li elements.

For a demonstration, refer to the example below:

.overflow {
  overflow: hidden;
}

.list {
  border: 1px solid grey;
  border-radius: 16px;
}

/* Misc */
.list li { padding: 4px }
.list li:nth-child(odd)  { background-color: cyan }
.list li:nth-child(even) { background-color: lime }

p { margin-bottom: 2px }

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
<p>This does <em>not</em> have <code>`overflow: hidden`</code> on the parent <code>ul</code>.</p>
<ul class="list">
  <li>lorem</li>
  <li>ipsum</li>
  <li>dolor</li>
  <li>sit</li>
</ul>

<p>This <em>does</em> have <code>`overflow: hidden`</code> on the parent <code>ul</code>.</p>
<ul class="list overflow">
  <li>lorem</li>
  <li>ipsum</li>
  <li>dolor</li>
  <li>sit</li>
</ul>

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

Using Conditional Tags for CSS Display

I'm working on implementing Conditional Tags to toggle a CSS class on or off based on the current displayed page. However, I'm running into an issue where the code isn't executing properly. There might be a syntax or logic error causing the ...

phpcssif-statementconditional-statements

What could be the reason for the lack of CSS being applied to elements sharing the same class?

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=de ...

htmlcss

plugins: [ new webpack.LoaderOptionsPlugin({ // test: /.xxx$/, // can be used selectively for specific modules options: { modules: ... } }) ]

const webpack = require("webpack"); const path = require("path"); const DIST_DIR = path.resolve(__dirname, "dist"); const SRC_DIR = path.resolve(__dirname, "src"); const config = { entry: SRC_DIR + "/app/index.js", output: { path: DIST_DI ...

reactjswebpackbabel-loader

Import necessary styles into the shadow DOM

Embracing the concept of shadow dom styles encapsulation is exciting, but I wish to incorporate base styles into each shadow dom as well (reset, typography, etc). <head> <link rel="stylesheet" href="core.css"> ... </h ...

javascripthtmlcssweb-componentshadow-dom

Challenges with TypeScript build in DevOps related to Material UI Box Component

Currently, I am facing an issue while trying to build a front end React Typescript application using Material ui in my build pipeline on Azure DevOps. The problem seems to be related to the code for the Material ui library. Despite successfully building th ...

javascriptreactjstypescriptazure-devopsmaterial-ui

Issue ( Uncaught TypeError: Trying to access a property of undefined ('data') even though it has been properly defined

One of my custom hooks, useFetch, is designed to handle API data and return it as a state. useFetch: import { useState, useEffect } from "react"; import { fetchDataFromApi } from "./api"; const useFetch = (endpoint) => { const [d ...

reactjstypescriptvitestrapi

modify the name attribute of a select dropdown using jQuery dynamically

In my current project, I am working on dynamically changing the "name" attribute for each select box based on user interactions. The scenario is as follows: When a user clicks on an option in the first select box, a new select box appears with the remainin ...

javascriptphpjqueryhtmlcss

Utilizing yarn workspaces and the yarn link feature in your project is

In my workspaces project, the structure is as follows: /project - package.json /packages /project-a package.json /project-b package.json The project-b relies on project-a. In the workspaces setup, everything works ...

reactjsnpmyarnpkglerna

"Learn the steps for accessing the most recent version of a ReactJS application from the server

I have my react app hosted on a Netlify domain. How can I ensure that users who have previously loaded older versions of the app are redirected to the most recent deployed version? ...

javascriptreactjstypescriptreact-hooksnetlify

Flexbox layout to achieve equal height columns with content centered

In search of a solution to create two columns with equal height and center-aligned content within each column, while also maintaining different widths. Issue: The challenge lies in achieving both 'equal height' and 'middle aligned' at ...

htmlcssflexboxsemantic-ui

Ensure tables are vertically centered when printing an HTML page

I need to export two tables, each measuring 7cm×15cm, to a PDF file with A4 portrait paper size using the browser's "Save to PDF" option in the print tool. My goal is to center these two tables vertically on the A4 paper. If that proves difficult, I ...

htmlcssprinting

Flip the direction of this vertical CSS motion blur effect

Is there a way to modify this code so that the object can have a vertical motion blur instead of a horizontal one? I want it to move from top to bottom and then back up. Can anyone assist me with this? http://jsfiddle.net/db8gr4y6/ #outer { posit ...

htmlcsscss-transitionscss-animations

Navigational assistance on the keyboard - Improving Accessibility

My situation involves selecting an option from a dropdown menu on X-page, which triggers the opening of Modal-1 while disabling the background. If a selection is made within Modal-1, it leads to Modal-2. I am facing two issues/questions: Upon opening Moda ...

htmlcssangularaccessibility

Leveraging NextJS with next-translate: accessing language settings externally from components

Here's a quick query regarding our application setup (NextJS 11.0.0 + next-translate 1.0.7): The library includes a function for making an API call (/lib/mylib.js): export const getDataExample = async (lang) => { return fetch(_apiurl_/example/{ ...

reactjsnext.jslang

What are the different ways to share data between components in React?

There are two components in my code, one named <Add /> and the other named <Modal>. The <Add /> component has a state for handling click events. Whenever the <Add /> component is clicked, the state is set to true. I need to utilize ...

javascriptreactjsnext.jstailwind-css

What is the best way to pass value to a URL in a React JS application?

Is there a way to properly use history.push in React to push text to the URL route manually? I am trying to achieve this in my onChange method for an input field: function Header(props) { return ( <div> <input type="radio" onChan ...

javascriptreactjsreact-routerreact-router-dom

Is there a way to insert a record upon the user clicking on the Add Record button?

// Here is my Component code // I want to figure out how to add a new row to the table with fresh values. import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-uom', templateUrl: './uom.component.html ...

angularhtmlcss

Struggling to eliminate margins in a React web application

Can anyone assist me with removing the large white margins on my react project? Here are some solutions I have attempted. * { margin: 0; padding: 0; } /-/-/-/ body { max-width: 2040px; margin: 0 auto; padding: 0 5%; clear: both; } I've exp ...

cssreactjsreact-redux

Allow one child to be visible even if the parent container has hidden overflow (or a different setting)

Is there a way to achieve the same look as shown in this example, but without repeating the border-radius code for the div.left in the CSS? It feels redundant and I suspect my approach may not be optimal. If you have any suggestions on how to accomplish t ...

htmlcssoverflow

Error encountered: Unexpected '<' token when trying to deploy

Trying to deploy a React app with React Router on a Node/Express server to Heroku, but encountering the following error... 'Uncaught SyntaxError: Unexpected token <' Suspecting the issue may lie in the 'catch all' route in the Expr ...

javascriptreactjsexpressrouter