Polymer listbox for options dropdown is rendered outside viewing area

[irontoby]

On the "Look & Feel" tab of the options page, any time I try to select an option which uses a dropdown, it is rendered offscreen and I cannot change it.

Attached is an image I captured while hovering the <iron-dropdown> element in Developer Tools, which is supposed to render the options. As you can see, Chrome indicates that it is being rendered below the visible area of the options dialog.

This has happened for me both on Ubuntu and Windows, on a profile with no other extensions. I'm using English localization. It happens only on the "Look & Feel" tab; the others work correctly. I suspect that only on that tab, some other element is pushing the options dialog out of the way.

[irontoby]

Also, there are no warnings or errors in the Console log.

[svenackermann]

Hi,

thanks for the detailed report, that really helps.
It's still strange to me why this happens on your machines but not on mine and also why it just happens on the look & feel tab. Also after research I think it should happen to me, too. The problem is that the style attribute of your "iron-dropdown" element has no "top"-property. For me it's there and if I remove it from markup I have the same problem as you. I reviewed the relevant polymer source code and did not find out where this "top"-property comes from, but I'm pretty sure polymer adds it. The cause is that the value "center" for attribute "vertical-align" on element "paper-dropdown-menu" is not valid, it can only be "top" or "bottom". I added value "center" because otherwise the menu appears shrinked (with a scrollbar) when you open it at the bottom or top of the options popup which is quite ugly.

However, I think I have a solution, but since I cannot reproduce the problem I need your help. Could you please download and extract this zip file? This is a slightly modified version of current Prime Player which hopefully fixes the problem. You can install it as unpacked extension after you disabled the original version of Prime Player (let me know if you need help with that, you need to enable "developer mode" at the top of Chrome's extensions page). Then just open the options page and see if your problem is gone.
Unfortunaly this fix adds the problem described above when you open the dropdown near the top/bottom of the popup, but I can live with that.

Thanks in advance,
Sven

[irontoby]

Yes, the attached version does show correctly for me but also displays the problem you specified if rendered at top/bottom. That is very bizarre indeed that it happens every place and on every platform for me, and I'm the only one so far who has reproduced it. I wonder if it's some Chrome setting or something about the Google account that my Chrome is associated with...

Anyway, I hate to think that you'd make the element less usable just for me :) It's not just ugly to have it shrinked, but also more difficult to use. I verified that something like the following will cause the dropdown to be rendered correctly for me, without the problem mentioned:

$($0).on('tap', function(){
  var $el = $(this);
  var top = $el.offset().top + $el.height() / 2;
  $el.find('iron-dropdown').css('top', top);
});

This uses the Polymer tap event to position the dropdown halfway down the parent paper-menu-button element (which in this case was automatically assigned to $0 by Chrome dev console when I inspect that element). The first time it shows there is a very slight moment where you can see the element being positioned, so maybe there's a better Polymer event to use.

I'm not familiar with Polymer, but if you want to push whatever change you made for the attached zipfile into a feature branch, I'd be willing to pull it and play around with the events for a bit, to find a solution that both correctly draws the dropdown and avoids the squished menu on top/bottom.

[svenackermann]

Hi,

I could repro this now on another machine. For the next 2 weeks I'm on vacation, so during this time there will be no reaction. For now, I will provide the fix that I sent to you.
If you like you can play around a bit with the developer tools to find out a better solution. Actually I don't like the idea of handling this with Javascript, this might not work with future versions of polymer and behave differently on other machines. You can also clone Prime Player and build it yourself, here's a short howto.

Thanks again for your help,
Sven

[irontoby]

Well if you're happy with the result and can reproduce it then I probably won't worry about it any further... enjoy your vacation!