Selection background does not include horizontal scroll

PolymerElements / paper-dropdown-menu

A Material Design browser select element

https://www.webcomponents.org/element/PolymerElements/paper-dropdown-menu

61 stars 107 forks source link

Selection background does not include horizontal scroll #161

Closed peteblois closed 8 years ago

peteblois commented 8 years ago

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

Open menu
Scroll horizontally
Browsers Affected

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

valdrinkoshi commented 8 years ago

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.