Search code examples
csslistboxpolymerpolymer-2.x

Create Profile Dropdown Menu in Polymer with Triangular top

I am trying to create a profile menu for my polymer website, something on the lines of github.com

GitHub profile menu

If you notice,there is a triangular tip at the top of the menu.I am trying to create a similar triangle at the top of paper-listbox.

The problem I am facing is that the triangle seems to hide as soon as it gets out of the boundaries of paper-listbox.

I have create a jsbin to demonstrate my problem: http://jsbin.com/samaloqowu/1/edit?html,console,output

If you change the top property of the triangle (say -16px), it hides when it gets out of the listbox region. Please help me solve this CSS issue.

Solution

  • Short answer : No you can't.

    Explanation : Because the dropdown content get encapsulated in a slotted element that gets styled inside the shadowRoot of the custom element you try to modify the behavior. And the paper-menu-button doesn't actually gives you a way to directly customize the slotted.
    But there is a trick ! You can access the slotted through classic javascript. Just alter your connectedCallback function and add this line :

    ...
connectedCallback() {
  super.connectedCallback();

  this.$.profileMenu.$.dropdown.querySelector('.dropdown-content').style.overflow = 'visible';
  ...
}
...

    This should do the trick, I agree this looks totally awful and trying to force and change the initial behavior of an element is not really recommended but well it seems to work, just make some tests when the element gets in a new context to see if anything breaks.

    UPDATE (22/09/2017) :

    Thinking of that again, I think this is a terrible idea to change this overflow to visible, I guess the polymer team has set the overflow to auto because if the list get long and you force the height of the element, the list will flow and be visible which is not really a dropdown anymore, but more like a full list display and that will mess with the general design purpose of your app. IMO when you start trying to mess with the inner properties of a custom element it means this element doesn't quench your requirement, and that it's time to make your own, especially when you try to modify the design of a custom element that has a design already implemented.