Show QSelect options as a popup menu on bottom of the screen

Show QSelect options as a popup menu on bottom of the screen, like the native select on iPhone.

vuequasar

by

PDan

November 25, 2023

Problem description

You don't like the way options are displayed on the mobile and you want them to show as a popup menu on the bottom of the screen.

Solution

Demo.vue

<template>
  <div class="q-pa-md q-gutter-y-md" style="max-width: 300px">
    <q-select
      v-model="model"
      :options="options"
      label="Select"
      popup-content-class="q-select__dialog--on-bottom"
      transition-show="slide-up"
      transition-hide="slide-down"
      behavior="dialog"
    />

    <q-select
      v-model="model"
      :options="options"
      label="Select with input"
      use-input
      popup-content-class="q-select__dialog--on-bottom"
      transition-show="slide-up"
      transition-hide="slide-down"
      behavior="dialog"
    />
  </div>
</template>

<style lang="sass">
.q-select__dialog:has(.q-select__dialog--on-bottom)
  min-width: 600px
  width: fit-content !important
  max-width: 100% !important
  border-radius: 4px 4px 0 0 !important

  @media (max-width: 600px)
    min-width: 100% !important
    width: 100% !important

  label:not(.q-select--with-input)
    height: 0

.q-dialog__inner:has(.q-select__dialog--on-bottom)
  top: auto
  bottom: 0
  padding: 0
</style>

<script setup lang="ts">
import { ref } from 'vue';

const model = ref(null);
const options = [ 'Option1', 'Option2', 'Option3', 'Option4', 'Option5' ]
</script>

Demo