Dialog overflowing due to Material-UI Dropdown

Is there a way to make the dropdown select options in a Dialog (modal) extend past the bottom border instead of getting cut off? I'm currently using MUI v5.

<Dialog open={open}>
  <DialogContent>
    <Autocomplete
      disablePortal
      id="combo-box-demo"
      options={options}
      // getOptionLabel={(option) => option}
      sx={{ width: 300 }}
      renderInput={(params) => <TextField {...params} label="Numbers" />}
    />
  </DialogContent>
</Dialog>

For an example, you can check out this (extreme) Code Sandbox link: Code Sandbox

Answer №1

To resolve the issue, adjust the disablePortal prop to either remove it or set it to false within your Autocomplete component. If you are utilizing a portal in the dropdown list, the actual DOM element of the dropdown will be placed outside of the Dialog hierarchy (you can verify this by inspecting the element), causing its size not to be limited by the dialog's layout.

https://codesandbox.io/s/69418435-materialui-dialog-dropdown-overflow-574px

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 blur event is failing to trigger in my custom input component

// The Custom Input component const Box = styled.div``; const InputBox = styled.div<{ width: string }>` display: flex; width: ${(props) => props.width}; height: 42px; justify-content: space-between; align-items: center; padding: 9px ...

Leverage the power of react-i18next in class-based components by utilizing decorators and Higher Order

Currently, I am working on implementing i18n into my React project that also utilizes Redux, with the assistance of react-i18next. In this particular project, we are using class components alongside decorators. Originally, I intended to experiment with r ...

``How can I lock the top row of an HTML table containing input fields in place while

Below is the table structure: <table> <tr> <th>row1</th> <th><input type="text"></th> <th><input type="text"></th> <th><input type="text"></th& ...

Content will adjust to the screen size after a specific re-sizing

When the width is under 1024, I want the body of the page to scale to fit the user's screen without a scrollbar. My goal is to adjust the entire body so that it fits within the browser window without a scrollbar when the width is under 1024. I attempt ...

Navigating in React Navigation: Techniques to Directly Access a Specific Index in a Datasource

I am a beginner at React Native and I have been working on developing a simple recipe app. Everything was going well until I reached the point where I needed to navigate to a specific recipe from my dataset. I am looking to create a singleRecipe.js compone ...

The multi-level navigation bar is not displaying properly

I am currently facing an issue with my Mega menu. It displays two levels of menus perfectly fine, but I need to add a third level as shown in the image below. However, when I try to include the third level, it disrupts the design and causes the Grand Child ...

Is there a way to move the menu bar closer to the edge?

I've been working on implementing an AppBar based on the Material UI documentation, but for some reason, I can't get it to align closer to the side. I want the logo and the button to be positioned closer to the side (refer to the image). Despit ...

Instructions for updating the color of the value attribute shown at the center of the MUI Gauge chart component

I am looking to customize the color of the value attribute displayed at the center of the material UI gauge. I want to change it from the default color to a custom one, specifically for the value 60 shown in the provided image. Below is the source code fo ...

How to Adjust the Padding of Tree Row in GWT?

Have you ever seen a GWT tree before? It sort of resembles the following structure: <div class="gwt-Tree"> <div style="padding-top: 3px; padding-right: 3px; padding-bottom: 3px; margin-left: 0px; padding-left: ...

Changing a URL parameter based on the element's width is a simple task when

I'm trying to display elements on a page by replacing a string in the URL parameter with the width of each element of a certain class. I'm new to JavaScript, so any help would be appreciated! Here's an example of the HTML for objects on the ...

Deletion of a custom function in JavaScript

I have written some basic code to generate and remove an image using functions. Specifically, I need help with removing the image created by the function Generate() when a button linked to the function Reset1() is clicked. Here's the code snippet for ...

What does the concept of "installing packages globally or locally" entail in React JS?

I recently began learning React.js and as I was setting up the environment, I came across a confusing term: installing packages globally versus locally. What exactly does it mean to install packages globally versus locally in this context? ...

Incorporate create-react-app alongside PHP for a dynamic and efficient

Recently, I've started learning React and now I am excited to integrate it with my index.php file. After creating my React project with create-react-app, I looked into how to use it with PHP post building process. However, I prefer working in developm ...

The Americanpurpose1 font family features playful smiley faces when special characters such as parentheses and hashtags are used

I have utilized the font family americanpurpose1 for my current project, however, I am encountering issues where special characters such as (), #, etc. are displaying as Smiley faces. I have attempted to use HTML symbol codes to resolve this problem, but u ...

Sliding Image Menu using jQuery

I am struggling with creating a menu using jquery mouseenter / mouseout effects. My goal is to have a small icon displayed that expands to the left and reveals the menu link when a user hovers over it. The issue I am facing is that the effect only works w ...

The Return function in a NextJS web application is executed only a single time

I encountered an issue in my nextjs application while attempting to implement a slider feature that displays a different component each time the next button is clicked. Here is the relevant code snippet: import React, { useState } from 'react'; i ...

Struggling to retrieve information from a JSON file and display it within a component?

After accessing the JSON data and storing the necessary values in a dictionary named details, I am encountering an issue where the values are displayed when console logged from inside the function but appear as undefined when console logged in the parent f ...

React Javascript - Troubleshooting setState problem and fixing copyToClipboard issue in a dynamic button and paragraph component

Currently, I am working on developing a chat-site with automatic response features for my job. However, I am facing challenges when it comes to setting the state of a button/paragraph pair that can be scalable in the rendering process. The ID information ...

Button with Circular Design by Tailwind

Is there a way to place a circle inside a button with text positioned to the right of it without overlapping in a centered manner? Take a look at this playground HERE <button class="btn btn-change"> <span class="w-5 h-5 bg-red-5 ...

Optimizing React+ReactRouter web app loading times by efficiently splitting and loading CSS using WebPack

I am encountering a delay in the initial loading of my web app, even after implementing various improvements like using only critical CSS during server side rendering. Unfortunately, post-SSR, React still generates unnecessary CSS rules that are not utiliz ...