Selection background does not include horizontal scroll

[valdrinkoshi]

From @peteblois on June 8, 2016 18:14

Description

Background of selected item in dropdowns which result in horizontal scrolling do not fill full width

Expected outcome

Selected background spans the entire row.

Actual outcome

When horizontal scrolling, selected background only covers a portion of the selected row.

Live Demo

http://jsbin.com/qomojadebo/edit?html,js,output

Steps to reproduce

1. Open menu
2. Scroll horizontally

Browsers Affected

• [x] Chrome
• [ ] Firefox
• [ ] Safari 9
• [ ] Safari 8
• [ ] Safari 7
• [ ] Edge
• [ ] IE 11
• [ ] IE 10

Copied from original issue: PolymerElements/paper-dropdown-menu#161

[valdrinkoshi]

This seems more a problem of paper-item rather than paper-dropdown-menu http://jsbin.com/mawedu/2/edit?html,console,output In particular, when it is contained in a container that is scrollable and impose a max-width, the :before element used for the backdrop (which is positioned to fit the container) together with the display: flex of the paper-item cause the issue. Will move the issue to the right repo.

[bicknellr]

@peteblois It looks like paper-item's lack of overflow behavior combined with the long, whitespace-less text is the issue here. You can get around this by wrapping the text in a span with some CSS to truncate the text (demo). As far as why this doesn't work for the unwrapped case, I'm not really sure how text node children of flex boxes are expected to behave so I'll have to do some more digging.