How can i make the Select.Content position controllable?

[enjidev]

Here's what I try to achieve:

Desktop:

• Default behavior

Mobile:

• Fixed position at the bottom of the screen
• Show overlay

---

I’d rather use only the Select component, instead of swapping between Select on desktop and Popover on mobile.

My main challenge is positioning Select.Content on mobile, it's not behaving as expected. And adding a overlay, what's the correct way to do this?

<template>
  <Select.Root
    :collection="collection"
    :positioning="{
      strategy: 'fixed',
    }"
  >
    <Select.Control>
      <Select.Trigger>
        <Select.ValueText placeholder="Select a Framework" />
        <Select.Indicator>
          <Icon name="solar:alt-arrow-down-bold-duotone" class="size-5" />
        </Select.Indicator>
      </Select.Trigger>
    </Select.Control>
    <Teleport to="#teleports">
      <Select.Positioner class="fixed inset-x-0 !top-auto bottom-0 h-min lg:top-(--y) lg:left-(--x) lg:bottom-auto lg:right-auto">
        <Select.Content class="bg-muted z-20 mt-2 rounded-md border p-4">
          <Select.ItemGroup>
            <Select.ItemGroupLabel>Frameworks</Select.ItemGroupLabel>
            <Select.Item
              v-for="item in collection.items"
              :key="item"
              :item="item"
            >
              <Select.ItemText>{{ item }}</Select.ItemText>
              <Select.ItemIndicator>✓</Select.ItemIndicator>
            </Select.Item>
          </Select.ItemGroup>
        </Select.Content>
      </Select.Positioner>
    </Teleport>
    <Select.HiddenSelect />
  </Select.Root>
</template>

[segunadebayo]

Here's a react example you can convert to Vue.

The trick is to use the updatePosition prop of the positioner to set a data-fullscreen attribute then use css to style that attribute as needed.

https://stackblitz.com/edit/lcso13hl?file=src%2FApp.tsx

import { Portal } from '@ark-ui/react/portal';
import { Select, createListCollection } from '@ark-ui/react/select';
import { ChevronDownIcon } from 'lucide-react';
import { useRef } from 'react';

const dataAttr = (el: HTMLElement, key: string, value: boolean) => {
  if (value) el.dataset[key] = '';
  else delete el.dataset[key];
};

const isMdDown = () => window.matchMedia('(max-width: 640px)').matches;

export const App = () => {
  const collection = createListCollection({
    items: ['React', 'Solid', 'Vue', 'Svelte'],
  });

  const ref = useRef<HTMLDivElement | null>(null);

  return (
    <Select.Root
      collection={collection}
      positioning={{
        updatePosition({ updatePosition }) {
          const positionerEl = ref.current as HTMLElement;
          const contentEl = positionerEl.firstElementChild as HTMLElement;

          dataAttr(positionerEl, 'fullscreen', isMdDown());
          dataAttr(contentEl, 'fullscreen', isMdDown());

          updatePosition();
        },
      }}
    >
      <Select.Label>Framework</Select.Label>
      <Select.Control>
        <Select.Trigger>
          <Select.ValueText placeholder="Select a Framework" />
          <Select.Indicator>
            <ChevronDownIcon />
          </Select.Indicator>
        </Select.Trigger>
        <Select.ClearTrigger>Clear</Select.ClearTrigger>
      </Select.Control>
      <Portal>
        <Select.Positioner ref={ref}>
          <Select.Content>
            <Select.ItemGroup>
              <Select.ItemGroupLabel>Frameworks</Select.ItemGroupLabel>
              {collection.items.map((item) => (
                <Select.Item key={item} item={item}>
                  <Select.ItemText>{item}</Select.ItemText>
                  <Select.ItemIndicator>✓</Select.ItemIndicator>
                </Select.Item>
              ))}
            </Select.ItemGroup>
          </Select.Content>
        </Select.Positioner>
      </Portal>
      <Select.HiddenSelect />
    </Select.Root>
  );
};

[enjidev]

Thanks, the provided example help a lot. Ends up with (tailwind) css solution only. What do you think? @segunadebayo

<Select.Positioner 
class="!top-auto !right-0 !bottom-0 !transform-none lg:!top-0 lg:!right-auto lg:!bottom-auto lg:!left-0 lg:!transform-[translate3d(var(--x),var(--y),0)]"
>

</Select.Positioner>

Also, I need to make sure one thing, is the top and left styles value here will be guaranted to be only 0px?