Fit headers and footer dropdowns into the omnitable

[plequang]

Description

Some column headers are using dropdowns by mean of https://www.webcomponents.org/element/PolymerElements/paper-dropdown-menu.

The paper-dropdown-menu's use default vertical-align=top, and horizontal-align is left for the first column, right for others.

We should rather use dynamic-align with fit-into properties from iron-dropdown in order to have the dropdown align and fit into the table dynamically.

However, this will be possible only when fit-into will be exposed by paper-menu-button and paper-dropdown-button, as explained in these issues:

• expose fit-into PolymerElements/paper-menu-button#108
• expose fit-into PolymerElements/paper-dropdown-menu#218

Corresponding PRs:

• Added fitInto property, forwarded to underlying iron-dropdown. Fixes … PolymerElements/paper-menu-button#130
• Added fitInto property, forwarded to underlying paper-menu-button. PolymerElements/paper-dropdown-menu#266

When these issues are fixed, we will have to expose a reference to the omnitable in the header template instances, and bind fit-into to that property in paper-dropdown-menus.

[plequang]

Unfortunately, seems no one in Polymer team wants to merge the PRs.

We might have to investigate to find another solution

[megheaiulian]

@plequang We can do this manually. We listen to one of the events and set paperDropdownMenu.$.menuButton.$.dropdown.fitInto = this.
I will open up a PR for this.