A guide on wrapping text within a Material-UI MenuItem

I am struggling to display text in a popover in multiple lines for UI reasons. I have tried updating the code but so far, I have not been successful. Any suggestions?

<Popover
  anchorEl={target}
  open={open}
  anchorOrigin={{ horizontal: 'middle', vertical: 'bottom' }}
  targetOrigin={{ horizontal: 'left', vertical: 'bottom' }}
  onRequestClose={handleRequestClose}
  animation={PopoverAnimationVertical}
>
  <Menu autoWidth={true}>
    <MenuItem style={{ width: '200px', height: '200px' }}>
      <p style={{ display: 'flex', flexWrap: 'wrap' }}>
        'aslkjflajdsljflskdjflsdfjlsjdfjdfjlasjkfadlsf'
      </p>
    </MenuItem>
    //this does not work....
  </Menu>
</Popover>
cssreactjsmaterial-ui

Answer №1

Consider trying a different approach by adjusting the whiteSpace style property.

 <MenuItem style={{whiteSpace: 'normal'}}>  
   <p>This particular tune consists of only six words. This particular tune consists of only six words.  This particular tune consists of only six words.  This particular tune consists of only six words.</p> 
 </MenuItem>

Answer №2

To ensure that long text wraps properly in the MenuList component, you can set the whiteSpace property to normal using the sx prop as shown below:

<Menu
  {...}
  MenuListProps={{
    sx: {
      width: 230,
      '& .MuiMenuItem-root': {
        whiteSpace: 'normal',
      },
    },
  }}
>

If you want all MenuItem elements in your application to automatically wrap long text, you can accomplish this by defining it within the createTheme method:

const theme = createTheme({
  components: {
    MuiMenuItem: {
      styleOverrides: {
        root: {
          whiteSpace: 'normal',
        },
      },
    },
  },
});

https://codesandbox.io/s/39400950-how-to-text-wrap-the-menu-item-in-material-ui-t9z2j?file=/demo.tsx

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

Join the AWS Chime meeting that has been initiated - learn how to connect now!

I have successfully utilized the Amazon Chime SDK within my React JS application to create meetings and initiate them. Now, I am wondering how others can join these meetings or how additional attendees can be added. ...

reactjsaws-chime-sdkamazon-chime

Setting up an image DIV for a dynamic overlay effect

Here is a JSFiddle that works correctly with fixed height and width: http://jsfiddle.net/69td39ha/2/. The animation activates correctly when hovered over. I attempted to adapt the above example to be responsive without fixed dimensions. However, I'm ...

jqueryhtmlcssanimation

Error: When executing the npm run build command, I encountered a TypeError stating that Ajv is not a

I keep encountering an issue whenever I try to execute npm run build error: /node_modules/mini-css-extract-plugin/node_modules/schema-utils/dist/validate.js:66 const ajv = new Ajv({ ^ TypeError: Ajv is not a constructor at Object.<anon ...

javascriptreactjsnpmbuildajv

Align the bottom of the Material UI icon with the bottom of the text

Below is the code snippet that I am working with: <td> <WarningAmberIcon sx={{ color: '#cc0000' }} />&nbsp;&nbsp; If you cannot print in colour, please <a href="https://www.aviva.ie/insurance/car-insurance/faqs/#do ...

htmlcssreactjsmaterial-ui

What is the method to trigger a function upon opening an anchor tag?

When a user opens a link in my React app, I need to send a post request with a payload to my server. My current strategy involves using the onClick and onAuxClick callbacks to handle the link click event. However, I have to filter out right-clicks because ...

javascripthtmlreactjs

CSS: Troubles with Element Widths

I'm dealing with a list item that contains an image, like so: <ul> <li> <img></img> </li> </ul> The image is not filling the entire width of the list item. Is there a way to make the list item shr ...

csswidth

What is the best way to hide the select arrow in an input-group using Bootstrap 4?

Is there a way to get rid of the unsightly double arrow in the select element? I have tried various solutions I found online, but none seem to be effective. <div class="form-group"> <label for="date">Date</label> <d ...

htmlcsstwitter-bootstrapbootstrap-4html-select

I'm attempting to kick off a fresh React project, but I keep running into an error that's preventing the app from being created. Despite having installed React globally, the

https://i.stack.imgur.com/IGP7t.png(base) example@example-PC:~$ create-react-app task-manager Starting the creation process of a new React application in /home/example/task-manager. Initiating package installations. Please be patient as this may take a f ...

reactjscreate-react-appubuntu-18.04

Display the personalized list of user items on the MERN dashboard

I'm currently developing a React booking platform that interacts with my backend through a Rest API using axios and redux. My challenge now is to display personalized reservations and rooms for each user on the website. However, I'm facing an iss ...

javascriptreactjsreduxaxios

Updating user credits through the Model::factory() method is a common practice in my workflow

I need to update the UserCredits after a purchase. For example, if a user currently has 10 credits and purchases 10 more, I want to add the purchased credits to their existing total. The goal is to increment the current credit score with the new credits ...

phphtmlcsslaravel

"Creating a link to a button with the type of 'submit' in HTML - a step-by-step

Found the solution on this interesting page: In a list, there's a button: <form> <ul> <li> <a href="account.html" class="button"> <button type="submit">Submit</button> ...

htmlcss

Encountering an issue with resolving 'material-ui/Radio' in Redux-form-material-ui

Recently, I upgraded to the latest version (v1) of material-UI and followed the recommendation to install v1 alongside the current version with the commands: yarn add material-ui@latest yarn add material-ui-next@npm:material-ui@next However, when attempt ...

material-uiredux-form

What could be causing my Font Awesome 6.1.1 icons to not show up after loading?

I'm currently enrolled in Brad Traversy's 50 Projects 50 Days course. On Day 26, which focuses on the Double Vertical Slider project, I noticed that the Font Awesome CDN being used is version 5.15.1, an outdated version. I have updated it to vers ...

htmlcss

Using JQuery to toggle a fixed div at the bottom causes all other divs to shift upwards

I'm currently working on a chat feature using node JS, and while the functionality is perfect, I've run into an issue with the CSS aspect of it. The problem arises when we have multiple tabs and clicking on just one causes all the tabs to move u ...

phpjqueryhtmlcssnode.js

Utilizing jQuery to close a modal when clicking outside of its container

Trying to target elements in my practice layout but struggling to figure out the right approach: BASIC HTML <button id="opencontact" type="button" name="button"> <i class="far fa-envelope fa-2x"></i> </button> <section id="c ...

jqueryhtmlcss

Prioritize the Menu display

Is there a way to bring the menu's black background in front of the body text in the image below? Here is the JSFiddle link for reference: https://jsfiddle.net/johnking/j58cubux/6/ The issue occurs when scrolling down and the menu is not clearly vi ...

htmlcss

TypeScript version 3.7 has implemented a new feature where it will now display errors for each individual invalid prop instead of grouping them together as it

Scenario using TypeScript 3.5.3 https://i.stack.imgur.com/wykd6.png link to interactive playground - TS 3.5.3 demo running successfully Example with TypeScript 3.7.2 https://i.stack.imgur.com/BPckB.png link to demo - TS 3.7.2 demo not functioning correctl ...

reactjstypescripttypescript3.0react-typescript

The Next.js application is unable to load the combined CSS from a React Component Toolkit

My React components repository includes individual .css files for each component which are imported into the respective components. These components are then bundled using a rollup configuration and published as an NPM package, with all component CSS being ...

cssreactjswebpacknext.jsrollup

What is the best way to convert an object into an array of objects for use in a select search functionality

I am attempting to map key and value pairs into a single array in order to use them as selectsearch options. I have successfully mapped each item individually, but now I need to combine all the data into one array. How can I achieve this? Here is how I am ...

javascriptreactjswebselectfrontend

Launching React application from a cloned GitHub repository

I've downloaded a GitHub repository with the code for a ReactJS app into one of my directories, but I'm having trouble running the app on my computer. While I know how to create a new app using create-react-app, I'm unsure how to use the exi ...

node.jsreactjsnpm