Styling menuitems on a vertical menu

[Klaus]

Hello,

I am attempting to create a vertical menu with a custom style for the menu items. I have the following code with the output attached. As you can see the menuitems are not aligned. Any thoughts? 

const contentRender = (props: any) => {
    return (
        <div style={{margin:"0px 0px 5px 0px",
            padding: '0px 0pc 0px 0px !important',
            fontSize:"xx-small",
            textAlign:"center",
            justifyContent:"center"}}>
            <SvgIcon icon={props.item.svgIcon} size={"large"}/>
            <br/>
            <span>{props.item.text}</span>
        </div>
    );
};
 
<Menu vertical={true} itemRender={contentRender}>
    <MenuItem svgIcon={allIcon} text={"All"} />
    <MenuItem svgIcon={userIcon} text={"Me"} />
    <MenuItem svgIcon={folderIcon} text={"None"} />
    <MenuItem text={"Workflows"} svgIcon={aggregateFieldsIcon}/>
    <MenuItem text={"RFIs"} svgIcon={stickyNoteIcon}/>
    <MenuItem text={"Coordinat.."} svgIcon={clockIcon}/>
    <MenuItem text={"Observat.."} svgIcon={binocularsIcon}/>
    <MenuItem text={"Inspection"} svgIcon={clipboardIcon}/>
    <MenuItem text={"Punch"} svgIcon={pinIcon}/>
    <MenuItem text={"Incident"} svgIcon={groupCollectionIcon}/>
    <MenuItem text={"Correspnd.."} svgIcon={commentIcon}/>
</Menu>
 
 

[Vessy]

Hi, Klaus,

Thanks a lot for the shared setup.

To make all menu items have the same width and align them in the center, you can add CSS styles that enforce a fixed width for each item. You may also need to use flex to center-align the icons and text. Here’s how you can modify the contentRender function and add some CSS styles to achieve the desired layout:

const contentRender = (props) => {
  return (
    <div
      style={{
        margin: '0px 0px 5px 0px',
        padding: '0px 0px 0px 0px !important',
        fontSize: 'xx-small',
        textAlign: 'center',
        justifyContent: 'center',
        width: '100px', // Set a fixed width for uniform item width
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
      }}
    >
      <SvgIcon icon={props.item.svgIcon} size={'large'} />
      <br />
      <span>{props.item.text}</span>
    </div>
  );
};

Kind regards,
Vessy
Progress Telerik

[Klaus]

Hi Vessy, 

Thank you for the response. I tried the above CSS styles but the menuitems are still not aligned. Did the above CSS style work for you?

[Klaus]

Never mind, I also added the above CSS styles to the top menu item as follows:

<Menu vertical={true} itemRender={contentRender} style={{display:'flex', flexDirection:'column', alignItems:'center'}}>

[Vessy]

Hi, Klaus, 
Yes, the initially provided snippet worked for me and I am glad you managed to make it working in your project as well.