Dropdown Resizing

[ebidel]

From @thisboyiscrazy on November 15, 2014 15:51

I have a dropdown with content that changes based on another dropdown. The popup part of the drop down is not resizing if the content changes so I end up with a scroll bar.

Copied from original issue: Polymer/polymer#930

[thisboyiscrazy]

The core-dropdown seems to have the same issue.

[thisboyiscrazy]

core-overlay does not seem to have the issue. could it be an issue with sizingTarget?

[morethanreal]

It's because a dropdown is sized explicitly so it's not constrained to its parent when it's position:absolute. I need to provide an api to reset the size or somehow handle that better.

[thisboyiscrazy]

Is there any quick / hack fix i can do in the mean time?

[morethanreal]

If the content of the dropdown is changing when the dropdown is closed, you can clear the dropdown's style.width and style.height and it should get the new size the next time it's opened.

[thisboyiscrazy]

Setting

this.$.dropdown.$.scroller.style.height = ""

in itemsChanged works

Except for one case: If on the first time the drop down based on dynamic content has is opened and it has no content i.e. items = [] or underfined, then the drop down well never open no matter what the content changes to.

[tsega]

Any progress in solving this issue?

[omerts]

Hey morethanreal,

Maybe you can add the height and width reset to core-dropdown's measure function, which runs on every open:

measure: function() {
      var target = this.target;
      // remember position, because core-overlay may have set the property
      var pos = target.style.position;

      // get the size of the target as if it's positioned in the top left
      // corner of the screen
      target.style.position = 'fixed';
      target.style.left = '0px';
      target.style.top = '0px';

      /**
       * Reset the explicit width and height of the sizingTarget
       * for cases when content was changed dynamically
       */
      this.sizingTarget.style.height = "";
      this.sizingTarget.style.width = "";

      var rect = target.getBoundingClientRect();

      target.style.position = pos;
      target.style.left = null;
      target.style.top = null;

      return rect;
    },

[omerts]

There is another problem with dynamic dropdown content. "core-overlay" is watching for changes in the target (our dropdown), and once the target's content changes, core-overlay changes its display to none.
You can find it at core-overlay.html on line 305:

    targetChanged: function(old) {
      if (this.target) {
        // really make sure tabIndex is set
        if (this.target.tabIndex < 0) {
          this.target.tabIndex = -1;
        }
        this.addElementListenerList(this.target, this.targetListeners);
        this.target.style.display = 'none';
        this.target.__overlaySetup = false;
      }...

[StephanBeutel]

+1
resizing is necessary. Populating the dropdown with new values must trigger a resize.

[evtaranov]

vote!

[fedy2]

+1

[czellweg]

+1 I would like to see this feature too. I'm working on a dropdown which gets populated based on results returned from an ajax call.
The first time the call returns and the dropdown opens, everything looks fine and it's resized appropriately. However, on subsequent calls - like others have pointed out above - there appears a scrollbar without resizing or (depending on the number of results returned in the first call) the dropdown is too big and fills up unnecessary space on the screen.

[czellweg]

The quick-fix suggested by @thisboyiscrazy worked for me:

update: function() {
  var self = this; // self points to the polymer input element with the dropdown attached

  // update the model of your dropdown here

  if (self.focused) {
       setTimeout(function() {
          self.$.dropdown.$.scroller.style.height = ""
          self.$.dropdown.$.scroller.style.width = ""
          self.$.dropdown.open();
       }, redrawFix);
   }
}

I haven't tested this across many browsers or devices but it looks fine on Chrome 40 and Safari 8.0.3.

[morethanreal]

This should be fixed with googlearchive/core-dropdown@921c2b8.

[dominik0711]

Still not fixed yet! I have to follow the advice from @czellweg to trigger recalculation of core-dropdown. Currently seen in Polymer v0.5.5

[JanMiksovsky]

If this is still a bug, I'm interested in getting a repro case.

The successor to this component appears to be iron-dropdown, but iron-dropdown appears to resize as expected when new items are added. See http://jsbin.com/xemopu/edit?html,output.

If anyone can offer a repro case with iron-dropdown or another contemporary element (paper-dropdown-menu, paper-menu-button, etc.), please post!