How can Material UI React handle long strings in menu text wrapping for both mobile and desktop devices?

Is there a way to ensure that long strings in an MUI Select component do not exceed the width and get cut off on mobile devices? How can I add a text-wrap or similar feature?

Desktop:

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

Mobile:

https://i.sstatic.net/8xoW6.png

<FormControl sx={{ m: 1, minWidth: '100%', marginLeft: 0, padding: 0 }}>
  <Select
    value={prompt}
    onChange={handleChange}
    displayEmpty
    inputProps={{ 'aria-label': 'Without label' }}
    sx={{'bgcolor': 'rgba(139, 139, 139, 0.3)', color: 'white', border: '1px solid rgba(255, 255, 255, 0.4)', minWidth: '100%', marginLeft: 0, padding: 0}}
  >
    {prompts.map((prompt, i) => <MenuItem value={i}>{prompt}</MenuItem>)}
  </Select>

prompt is an array of strings.

What methods can be used to style the select menu? How can we prevent the dropdown width from exceeding the width of the Select element?

javascriptcssreactjstypescriptmaterial-ui

Answer №1

To achieve multi-line / wrapping menu items, one can use the CSS property white-space set to normal

Example in CSS:

white-space: normal;

Alternatively, this can also be applied as an inline style within a Mui component (or possibly through an sx prop)

<MenuItem style={{whiteSpace: 'normal'}} value={i}>{prompt}</MenuItem>

Answer №2

Hopefully this information is useful to you

    const inputReference = useRef();


    <Select
        inputProps={{ ref: reference => (inputReference.current = reference?.node) }}
        MenuProps={{ sx: { width: inputReference.current.offsetWidth }}}>
        //place your options here
    </Select>

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

Creating a text shadow effect with text that has a transparent color

I am attempting to replicate the design shown below using the CSS text-shadow property, but I keep getting a solid color outcome. I have tried using an rgba value of 255,0,0,0.0 for the font-color and text-shadow like this: text-shadow: -1px -1px 0 #0 ...

css

Apologies, I encountered an error message saying "npm i react-push

An error occurred while trying to install react-push-notification: Error code ERESOLVE: Unable to resolve dependency tree While resolving dependencies, the following issues were found: react@^17.0.2 from the root project Could not resolve peer depen ...

reactjsnpm

Error message: Upon refreshing the page, the React Router is unable to read properties of

While developing a recipe application using the Edamam recipe API, everything was functioning smoothly until an issue arose when refreshing the Recipe Detail page. The error occurs specifically when trying to refresh the page with a URL like http://localho ...

javascriptreactjsapireact-router

Using Node.js: Only bring in the necessary function, don't execute the entire file

Today, I stumbled upon an interesting observation and I'm curious about the peculiar behavior of node in this scenario. I have two files structured as follows: src/api/index-api.ts src/worker/index-worker.ts Both of these files contain a simple con ...

node.jstypescript

Issue with IE11 compatibility in Angular2 (AngularQuickStart version 2.4.0) due to syntax error

Encountering an error in the browser console when attempting to run my Angular2 app on IE11. The error "Недопустимый знак" translates to unacceptable symbol. https://i.stack.imgur.com/0mHBC.png Here is a snippet of my index.html: <!DO ...

angulartypescriptinternet-explorer-11

Retrieve Data from Form Using PHP and Ajax

I currently have a form on my HTML page that looks like this: <form id="submission" action="testresponse.php" method="post"> <input id="URL" name="URL" type="text"> <button name="Submit" type="submit">Subm ...

javascriptphpjqueryajaxforms

Delay reading body until npm request completes

My current challenge involves using npm request and cheerio to extract webpages and analyze their HTML structure. Everything works smoothly in scenarios where the HTML is available upon request. However, I am facing a problem when a website initially displ ...

javascriptnpmnpm-request

Getting the ajax response by utilizing a custom attribute within a php loop is definitely a handy trick

Currently working on integrating ajax with php. I have a set of buttons within a loop, and I am trying to display or fetch data (number) in the correct place/div using the "attr" method in jQuery. However, it seems that it is not functioning as expected on ...

javascriptphpjqueryajax

React-Elastic-Carousel Personalized Navigation

I have been trying to add custom arrows to my react carousel, but I keep encountering the 'type' is not defined no-undef error. I would appreciate it if someone could point out what mistake I might be making and provide a solution for the current ...

reactjscarouselreact-elastic-carousel

Is there a way to have a div element with a box-shadow effect on top of its h1 child element?

I am facing an issue where a div with a box-shadow and an h1 inside are not aligned properly, causing the shadow to not cover the h1 element. Below is the code snippet in question: h1 { position: absolute; top: 50%; left: 44%; -webkit-t ...

htmlcss

Is there a way for me to simultaneously run my frontend code (react) and backend (node) when they are stored in separate repositories?

I am facing an issue where my client code and server code are not in the same folder. While I understand that using the concurrently library can help me run backend and frontend together, all the examples I come across assume that the client and server cod ...

node.jsreactjsreact-fullstack

Streamlined Boilerplate to Kickstart Your Project

Can anyone suggest a well-crafted boilerplate .less file to kickstart a new project? I'm looking for a comprehensive .less file that includes: CSS Resets styles CSS Normalizer styles CSS3 Helpers (box radius, gradients, box shadow, transition) Basic ...

htmlcsslessboilerplate

Is d3 Version pretending to be a superior version?

I have encountered an issue with my project that involved using d3 v5.5.0. After transferring it to a different computer and running npm install, the application now seems to be recognizing d3 as a higher version? A crucial part of my program relies on th ...

javascriptreactjsd3.js

Steps for integrating custom slot properties in MUI data grids

Custom pagination has been successfully implemented using the mui datagrid component. However, when attempting to pass props for pagination using datagrid's slotProps, an issue arises stating that the type of onChange does not match. How can this be c ...

reactjstypescriptmaterial-ui

Display an image when the link is hovered over within a table

I'm looking for a way to display a scanned receipt image when hovering over a link within a table. I've written some code but it's not working as expected. Can anyone help me figure out what's wrong? Here is the current state of my cod ...

javascriptjqueryhtmlcss

Unable to retrieve the form from the website

My goal is to extract the login form from: Although I can see the form element when inspecting in Chrome, I'm encountering difficulties retrieving it using the jaunt API in Java. userAgent = new UserAgent(); userAgent.visit("https://etoro.com/login" ...

javascripthtmljaunt-api

TypeScript types for d3 version 4

I am currently working on a d3 project and to simplify the development process and reduce errors, I decided to implement TypeScript. Using d3 v4, I initially faced issues with incorrect type definitions which led to errors like d3 not having a definition ...

d3.jstypescripttypescript-typings

Ways to make React detect a click event triggered by Jquery

I'm currently utilizing dabeng/OrgChart within a React application. The functionality I am looking to achieve is when a user clicks on a node, instead of Jquery populating an input box, I want React to save the selected node in state. I have attempte ...

javascriptjqueryreactjs

The CSS @media query is failing to function properly

I'm currently developing a web application similar to Spotify for my personal use, but I'm running into some issues with the @media query as it doesn't seem to be working correctly. Here is the CSS code: /* Screen Adapting */ @media (height ...

htmlcssweb-applicationsmedia-queries

Is it possible that adding html tables together could result in the numbers being concatenated instead of summed?

When attempting to calculate the total sum of values in an html table column, my variable seems to be returning concatenated strings instead of the actual sum. For example, instead of 1 + 2 + 3 = 6, I am getting 1 + 2 + 3 = 123. The values in the "votes" ...

javascriptjqueryhtmlfunction