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

The function module.exportDefault does not exist

It seems like I am facing a unique issue with Meteor that I haven't come across before. Running on various versions like Meteor 2.0-beta.4, as well as Meteor 1.11 and 1.12, after setting up the app with a fresh checkout and executing "meteor npm inst ...

reactjsmeteorbabeljs

How to enhance the animation of the Material-UI right side persistent drawer

I am currently working on a sophisticated application that includes several drawers. Specifically, I am encountering an issue with the animations of the right side drawer. While the drawers animate correctly, the parent divs do not seem to follow suit. Eve ...

cssreactjsmaterial-uijss

It seems like there is a glitch in the npm registry causing an undefined error. Let's try again

Attempting to add necessary dependencies to my project, however, encountering an error when executing yarn install [2/5] ...

reactjsnpmnpm-installyarnpkgyarn-workspaces

Expanding the CSS Search Box

Visit the link I've been working on coding a CSS text box. When you hover over the button in the provided link, you'll notice that the 'Type to search' functionality is working smoothly as it moves to the right. My current focus is on ...

css

Background color for the DIV is not displaying properly when it is set to the

While trying to set the background color of a div to light blue #2390bb, I encountered an issue. Even though I have already set the body background color to Light Grey#D6D6D6, the light blue color doesn't display in the div. Can anyone help me figure ...

csshtmlcolorsbackground

What do you need to know about the error message "Module build failed (file-loader)"

Every time I try running my ReactJS project with npm start, I encounter an error for each svg file in the images folder. Can someone help me figure out what mistake I might be making? Thank you in advance. ...

reactjsnpm

Change the size of the image to use as a background

I have an image that is 2000x2000 pixels in size. I originally believed that more pixels equated to better quality with less loss. Now, I am looking to display it on my browser at a resolution of 500x500. To achieve this, I attempted to set the image as t ...

jqueryhtmlcssimage

pictures on the blog entries

I'm looking to customize the look of images within a section. I want to add borders to the images, but since they are being added dynamically as content in blog posts, I can't reference them directly. Can you recommend a way for me to achieve thi ...

htmlcss

Exploring an array in React using typescript

I have a persistent data structure that I'm serving from the API route of my Next.js project. It consists of an array of objects with the following properties: export interface Case { id: string; title: string; participants: string[]; courtDat ...

reactjstypescriptnext.jsreact-query

Issue with animation transition not triggering on initial click

I am currently working on creating an animation for a form using JS and CSS. Here is the code snippet I have: var userInput = document.getElementById("login-user"); var userLabel = document.getElementById("user-label"); // User Label Functions funct ...

javascripthtmlcss

The positioning of drawings on canvas is not centered

I'm facing an issue while attempting to center a bar within a canvas. Despite expecting it to be perfectly centered horizontally, it seems to be slightly off to the left. What could possibly be causing this discrepancy? CSS: #my-canvas { border: ...

javascripthtmlcss

Prevent your HTML tables from overflowing

I am attempting to create an HTML table with three columns, where I want the first and third columns to have a width of "auto" based on their content. The middle column should then take up the remaining space. While this setup works well when the content ...

htmlcsshtml-table

Position two div elements side by side

Here is the HTML code snippet that I am working with: <div class="demand page"> <div id="crumby-title"> <div class="page-icon"> <i class="fa fa-line-chart"></i> </div> ...

htmlcss

"Exploring the Power of Jsoup for Selecting

I'm attempting to extract all the links nested within the div class news column index. Here is a snippet of the HTML structure: https://i.stack.imgur.com/zdFWS.jpg Below is the code I have used, but unfortunately, it's not yielding any results. ...

javahtmlcsswebjsoup

What is the best way to utilize recently added modules in React if they are not listed in the package.json "dependencies" section?

[I have updated my question to provide more details] As a newcomer to working with React, I may be asking a basic question. Recently, I installed several modules and will use one (example: @react-google-maps/api) for clarification. In my PC's termin ...

javascriptreactjsnpmnpm-installpackage.json

What is the best way to access a specific element within a component from a different component?

Seeking assistance with communication issues between React components. I have a Container component containing child components Contact, More, and About for a single-page website. Each child component has a reference set. The problem arises when trying to ...

javascripthtmlreactjs

What is the best way to insert a hint into an asp:textbox?

Is there a method to insert a hint or placeholder text within an asp:TextBox element? I am looking for a way to have text appear in the textbox that disappears when the user clicks on it. Can this be done using html / css? ...

asp.netcsshtmlplaceholderhint

React MUI buttons are experiencing difficulties due to the absence of a defined element type

For my current project, I have implemented MUI Buttons, but I am encountering a persistent error when rendering a button. It was previously functioning correctly, but now it keeps throwing this error: Element type is invalid: expected a string (for built- ...

reactjsmaterial-ui

Unique CSS content for varied designs

I have a CSS code snippet for a tooltip: .GeneralTooltip { background:#c7430f; margin:0 auto; text-transform:uppercase; font-family:Arial, sans-serif; font-size:18px; vertical-align: middle; position:relative; } .GeneralTooltip::before { content:"This is ...

htmlcsstooltip

Customize background images for each route in React.js Router

I'm looking to add a background image to a specific component in my React application. I have successfully implemented react-router-dom and here is my code. [App.js] import React, { Component } from 'react'; import { BrowserRouter as Rout ...

reactjsreact-router-dom