paper-menu-button is not responsivness

[imanzano]

Check the screenshot with this example when it is open near left border of the browser

Add to your favourites Share License Download Get Track Info

[addyosmani]

I agree that in general our elements should be responsive where possible. For an element that floats like a menu however, it's difficult to know what should happen when the viewport gets this small. This element isn't actually that bad as the viewport gets reduced. e.g:

to

Of course, when the window get's as small as you have it above, I see:

If I were using this element and the viewport got this small, I would probably hide the paper-menu-button and just switch to relying on an alternative form of UX for mobile (e.g menus included either in a top navigation or slide-out nav)

[imanzano]

Hi,

I think the main issue is that the paper element should follow the google material design guideline as much as possible and when the viewport is reduced the responsiveness fails.

Thanks!
Ignacio

[morethanreal]

I didn't see a guideline on what to do for this case in the material design spec. One of our designers recommended setting a minimum width, so I will implement that.

[imanzano]

Hi,

Yes, it is mention something when it talked about menus in general and in some videos in http://www.google.com/design/spec/components/menus.html#menus-usage

For example.

If the height of a menu prevents all menu items from being displayed, the menu can scroll internally. One example is when viewing a menu on a phone in landscape orientation.

So, I think when there is no space in the bottom an scrollbar should appears. Also in the videos shows when the menus is close to the screen border it is open to the left not to the right. Maybe just setting the menu open-side is enough, because I know where I put the menu so I can controle the open behaviour. What do you think ?

Regards
Ignacio

[tjsavage]

auto-moving this issue to googlearchive/paper-menu-button#16 and closing this one