Set CSS variable for adaptive width instead of `width`

[vincerubinetti]

trafficstars

For various reasons, I need to have portal on my <Float>, and I want the adaptiveWidth option to set the min-width on the dropdown instead of the width. It'd be cool if the package set a variable like --width, so we could use the trigger width however we want. Or, you could pass width: number as a render/slot prop for the Content component.

[vincerubinetti]

For now, I'm working around this like this:

<ListboxOptions
  class="list"
  @vue:updated="
    ({ el }) => {
      if (el?.tagName !== 'UL') return;
      el.style.minWidth = el.style.width;
      el.style.width = '';
    }
  "
>

This is in Vue. In React I guess you'd attach a ref and set the style on that.

[ycs77]

Hi @vincerubinetti, I've added the width attribute option for adaptive-width in new version v0.14.0 to solve this problem, you can pass the attribute option for adaptive-width to change the width attribute name.

Below example change the width attribute to min-width:

Usage (React)

<Float adaptive-width={{ attribute: 'min-width' }}>

Usage (Vue)

<Float :adaptive-width="{ attribute: 'min-width' }">