[Menu] Fixed width does not work

CumpsD
创建于
2015-08-24 19:49:27

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.

6条回答
llcoole93
回复于
2015-08-31 15:01:34
#1

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

tintin1343
回复于
2016-04-14 18:26:40
#2

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.

prionkor
回复于
2017-05-22 08:46:08
#3

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.

jmarks-joshua
回复于
2017-06-28 17:20:10
#4

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.

asmith13194
回复于
2017-11-14 20:26:17
#5

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

sarahmarciano
回复于
2018-05-10 15:14:52
#6

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

当前位于第1页,总计6 条回复

推荐相似问题

Hover issues with disabled buttons

I experience several issues with disabled property of FlatButton and RaisedButton. 1. Hovering active button in the same
讨论数 11
material-ui
创建时间:2015-08-24 12:40:32

Uncaught TypeError: this.isDeviceSize is not a function

Any idea why I would be getting this error? class PageWithNav extends React.Component { constructor() { super();
讨论数 3
material-ui
创建时间:2015-08-24 12:37:14

Table headerColumns object/array error handling

When providing an Object for headerColumns, without a colOrder array, the code tries to interpret headerColumns as an ar
讨论数 3
material-ui
创建时间:2015-08-24 10:08:28

webpack-example questions

in the webpack-example ./src/www/index.html there is code like this: <script src='app.js'><script> if I intall and start
讨论数 11
material-ui
创建时间:2015-08-24 10:04:39
讨论数 5
material-ui
创建时间:2015-08-24 07:19:54

Not working with react 0.14

I was trying to install material-ui on an app under with "react": "^0.14.0-beta3". However the package.json in master an
讨论数 4
material-ui
创建时间:2015-08-24 00:37:39

[TextField] "ReferenceError: process is not defined"

When TextField component is used in browser environment, calling method 'setErrorText' causes "ReferenceError: process i
讨论数 6
material-ui
创建时间:2015-08-23 18:35:23

Appbar iconClassNameRight expand more icon puts icon on the left

this is evident in the example, too: http://material-ui.com/#/components/appbar The problem occurs when I actually want
讨论数 3
material-ui
创建时间:2015-08-21 20:24:12

Scroll touches sometimes register as selection touches in Chrome for Android

In Chrome on Android 5.0.2, the touch that starts a scroll often registers as a selection in addition to scrolling. For
讨论数 3
material-ui
创建时间:2015-08-21 16:17:49

Second touch registered after auto scroll on Chrome for Android

On the components pages of material-ui.com in Chrome on Android 5.0.2, when you hit a menu item on the bottom of the pag
讨论数 2
material-ui
创建时间:2015-08-21 16:10:25