Allow customizing overlay width

[marcushellberg]

Expose a property like --vaadin-combo-box-width that can be used to configure the overlay width.

Would be helpful especially in situations where the dropdown contents are wider than the actual input field.

[jouni]

We had a prototype about something like this for 1.x version not long ago. Now that I think back, one of the problems is that we are using iron-list, and that positions the items absolutely, so the width of the items do not affect the width of the overlay. So we would still have to measure the width of the items to be able to make the overlay adjust to it.

@tomivirkki’s “flexbox” scroller could eventually fix this nicely ;)

[jouni]

Coming back to this a bit – it doesn’t really help to expose a custom CSS property for the overlay. Because of the “teleporting”, you can’t really target the correct overlay in any way currently.

We need something like vaadin/vaadin-overlay#48 to make it possible to target individual overlay elements.

If we could propagate the class attribute (or some other attribute) to the overlay:

<vaadin-combo-box class="my-combo-box"></vaadin-combo-box>

<dom-module id="my-combo-box-overlay" theme-for="vaadin-combo-box-overlay">
  <template>
    <style>
      :host(.my-combo-box) [part="overlay"] {
        width: 300px; /* Your custom width here */
      }
    </style>
  </template>
</dom-module>

An unfortunate amount of boilerplate, but I can’t think of any other way right now.

[jouni]

It could also be a specific attribute that we propagate, like overlay-theme or something…

[heruan]

Why introducing a "width" setting and not just fit the (longest) item width? One might not know in advance the width to set.

[jouni]

Because of the virtual scroller, we don’t know the width of all items. We could base it on the first page of items, though. In any case, it needs some JS to compute it, can’t be based on CSS alone, unfortunately.

At least now that the theme attribute is copied to the overlay, it’s possible to control the width manually.

[nemanjakmno]

Coming back to this a bit – it doesn’t really help to expose a custom CSS property for the overlay. Because of the “teleporting”, you can’t really target the correct overlay in any way currently.

We need something like vaadin/vaadin-overlay#48 to make it possible to target individual overlay elements.

If we could propagate the class attribute (or some other attribute) to the overlay:

<vaadin-combo-box class="my-combo-box"></vaadin-combo-box>

<dom-module id="my-combo-box-overlay" theme-for="vaadin-combo-box-overlay">
  <template>
    <style>
      :host(.my-combo-box) [part="overlay"] {
        width: 300px; /* Your custom width here */
      }
    </style>
  </template>
</dom-module>

An unfortunate amount of boilerplate, but I can’t think of any other way right now.

Is there something like --vaadin-combo-box-overlay-min-width: 234px; ? Couldn't make it work with this example above

[web-padawan]

Working example: https://glitch.com/edit/#!/foul-macaroni?path=index.html:10:0

We can consider using CSS custom property, too. But as mentioned above, there would be anyway the need for dom-module, because of the teleporting.

[nemanjakmno]

Working example: https://glitch.com/edit/#!/foul-macaroni?path=index.html:10:0

We can consider using CSS custom property, too. But as mentioned above, there would be anyway the need for dom-module, because of the teleporting.

Thanks a lot, works now!

[rolfsmeds]

I strongly recommend adding a css variable for setting the overlay width, seeing as how that should be quite simple to add to the current implementation. This is an extremely common need in cases where the field only needs to show a short code but the list items need to display a human-friendly name as well, and making the entire combo extra special wide just for that is really akward.

[rolfsmeds]

I suppose one possible workaround, that allows setting any arbitrary width to any combobox, without hardcoded predefined widths, would be to have a method that takes a width property as argument, e.g. setOverlayWidth(String width) that applies a unique theme attribute to the combobox based on the width, e.g. combobox-1234, and injects a corresponding css block to the page (e.g. using UI.getCurrent().getPage().executeJavaScript()) that corresponds to the generated theme name and applies the desired width to a custom property: vaadin-combo-box[theme="combobox-1234"] { --overlay-width:300px; }

Then you just need a single theme module that utilizes that custom property to override the overlay's width with [part="overlay"] { min-width: var(--overlay-width, auto); }

But, uh, a built-in solution would certainly be nicer :)

[robert-lee-hisl]

I've implemented the workaround, but this causes another problem: the popup is always left-aligned with the text field. This means if your combo is near the right-hand edge of the window, the popup is cropped.

Modification of the original example to show the problem: https://glitch.com/~unmarred-titanium-vermicelli

[Haprog]

Related issue for Flow API https://github.com/vaadin/vaadin-combo-box-flow/issues/155