Autocomplete dropdown is too narrow when inside of md-chips

[mxab]

Hi,

if I use a autocomplete in a chips the dropdown items are too short, is there any way to influence the dropdown's width?

http://codepen.io/mxab/pen/xwbZBL?editors=101

[nextor2k]

same here. 0.10.1 and 0.11.0-rc1

[topherfangio]

I was looking into this the other day but didn't have time to figure out why the CSS wasn't working like it should, as the inner items are the correct size. If either of you have a moment to dig in, some more information about exactly why the width is off would be very much appreciated.

[nextor2k]

the width is set in directive programmatically.

[topherfangio]

@nestorneto From what I was seeing, the min-width/max-width was set programmatically, but not the actual width. Are you seeing the actual width property being set?

[nextor2k]

it didnt set width. maybe its the problem. the component assumes the min-width

[topherfangio]

@nestorneto That's the part I couldn't figure out. Just setting min/max shouldn't actually affect it at all, it should still be sizing to the items contents as long as it's between min/max. I think there is an odd CSS interaction going on here. We'll try to track it down.

[paulflo150]

This is what's causing the items to be 16px not as wide (if you set it to 0 it will fill the whole area):

.md-virtual-repeat-container .md-virtual-repeat-offsetter {
 .....
right: 16px;
... }

There is also the "sizer" which is causing the scrollbars, if you take it out the scrollbars go away, but I am sure it has a use :)

<div class="md-virtual-repeat-sizer" style="height: 48px;"></div>

It would be great if you could also fix the height of the dropdown when there are no matches - it defaults to 226 px because the resizing does not execute if there are no items:

VirtualRepeatController.prototype.containerUpdated = function() { 
  // If itemSize is unknown, attempt to measure it.
    if (!this.itemSize) {
    this.unwatchItemSize_ = this.$scope.$watchCollection(
        this.repeatListExpression,
        angular.bind(this, function(items) {
          if (items && items.length) {
            this.$$rAF(angular.bind(this, this.readItemSize_));
          }

Finally, this is not really related to these issues, but is there a way to add a link or a button in the md-not-found template? I tried both but the click event doesn't get fired, or perhaps it is intended to work this way? Thanks!