Advanced Search Overlay Panel [Solved]

[AlexSantanna]

I’m new in VueJS and Quasar.

I’m migrating a JSF App to Vue and wanna know how can I achieve the same result bellow using Quasar.

I was thinking in use a q-card inside a q-input, but it must be show as an overlay.

Any help will be apreciated.

Best

Alexandre

[s.molinari]

Use QPopupProxy.

https://quasar.dev/vue-components/popup-proxy

Scott

[AlexSantanna]

Thanks for the tip, I was able to use the QPopProxy with the code bellow, but how to make the BOX DIV same width of input?

Sample is here.
https://codepen.io/Tand/pen/jOPxrOy

<template>
  <div class="q-pa-md">
    <q-input dense v-model="input">
      <template v-slot:append>
        <q-icon name="settings" class="cursor-pointer" :click="exibir = !exibir">
        </q-icon>
      </template>
      <q-popup-proxy value="exibir" breakpoint="200">
        <div class="q-pa-md" style="width:100%">
          <div class="filled flex inline shadow-box" :class="shadow-2">
            <div class="row">
              <div class="col-12"><q-input dense v-model="text" label="Standard" /></div>
              <div class="col-12"><q-input dense v-model="text" label="Standard" /></div>
            </div>
          </div>
        </div>            
      </q-popup-proxy>
    </q-input>
  </div>
</template>
<script>
export default {
  data () {
    return {
      exibir : False,
      text,
      input: ''
    }
  }
}
</script>

[metalsadman]

@AlexSantanna since https://quasar.dev/vue-components/popup-proxy#Pass-through-props, you can then use q-menu’s fit props https://codepen.io/metalsadman/pen/poJVNjv

[AlexSantanna]

@metalsadman @s-molinari thank you very much for the help.

Best.