Hi All, I’m creating an Advanced search dropdown, with Input and Popup-Proxy, using FIT to make the popup same width of the input, the problem begins when I put a ROW class in any div inside of the popup-proxy, at this moment popup-proxy FIT stop working. Any help will apreciated. Here a sample of the problem. https://codepen.io/Tand/pen/jOPxVyE

Any one?

Is there a way to make clearable icon in q-input appears in front of slot:append? By default it appears after.

https://codepen.io/Tand/pen/mdeyQxB?editors=1010

Thanks @s-molinari.

If we use <style scoped> this solution https://codepen.io/metalsadman/pen/oNgJRdE does not work. Any option besides removing scoped option?

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

Best.

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>

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