Material-ui: [Menu] Fixed width does not work

Created on 24 Aug 2015  路  6Comments  路  Source: mui-org/material-ui

When trying to use IconMenu I was playing with the width, trying to set it fixed.

<IconMenu iconButtonElement={iconButtonElement} menuStyle={styles.I18nMenu} autoWidth={false} width={192}>

However, it didn't get applied. I traced it to Menu which sets this:

      list: {
        display: 'table-cell',
        paddingBottom: desktop ? 16 : 8,
        paddingTop: desktop ? 16 : 8,
        userSelect: 'none',
        width: width,
      },

It seems the width only gets set on the list, while in order for the menu to actually have the fixed width, it should also be set on the root styles.

bug 馃悰

Most helpful comment

I managed to get around this issue by not using the menu element and placing my menuitems inside a div together :)

All 6 comments

I'm having a similar issue with the icon menu with not being able to declare a height with this prop

I was able to assign both width and height to the menu by specifying the menuStyle

menuStyle={{width: '1000px', height: 500}}

It looks like this:

screen shot 2016-04-14 at 1 26 00 pm

This seems to be fixed now. Closing this issue.

Version: 0.18.1

value of width with string like auto, inherit is ignored.

For example:


<IconMenu
    className="portal-iconmenu"
    menuStyle={{width: 'auto', backgroundColor: 'red'}}
    iconButtonElement={
        <RaisedButton ... />
    }
    open={this.state.openGroupMenu}
    onChange={this.handleTermChange}
>
    {this.menuItems(this.state.groups)}
</IconMenu>

Background color is set but not the width value auto.

I just found this problem, still doesn't work as I'd expect. Further than that though I've found it doesn't just ignore certain string values, it also ignores certain number values, not sure if it's based on circumstance, but i can set the width to 224px and it works (but my content is bigger than that so i tried 240px and it's still sitting at 280px for no reason at all. The cut off as it happens is 225px, and then when it gets back over 280px it works again.

I managed to get around this issue by not using the menu element and placing my menuitems inside a div together :)

@asmith13194 can you post your code here or explain how did you implement it exactly plz?
tnx in advance

Was this page helpful?
0 / 5 - 0 ratings