search

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

adding :before selector to paper-dropdown-menu causes odd layout #153

Closed ktiedt closed 8 years ago

ktiedt commented 8 years ago

Description

Adding a :before selector to the element seems to cause it to wrap down a line and nothing appears to fix this... the selector in question was this:

    span:before, paper-dropdown-menu:before {
      content: '»';
      color: #DD4B39;
      padding: 0 10px;
    }

Expected outcome

I would expect this to just prefix the dropdown with the above content

Actual outcome

Instead, the menu appears below the content as if it wrapped to a new line.

Live Demo

Public demo N/A - will see if I can reproduce on JSBIN later (but I can provide an internal link to a Google demo that shows this, just ping me)

Browsers Affected

Notes: applying float: left to the :before content will fix this, still seems odd that it is needed though.

valdrinkoshi commented 8 years ago

The issue is caused by the internal paper-menu-button which has display: block (which can be changed with the mixin http://jsbin.com/fegoho/3/edit?html,output), and by the <div role="button"> before it (https://github.com/PolymerElements/paper-dropdown-menu/blob/master/paper-dropdown-menu.html#L88), which should be fixed by making it position: absolute, or changing it to a span.