[v1] .q-field--with-bottom being added to field



  • Hi, I am using a text input with a date selector in the following way:

    <q-input v-model="startdate" dense stack-label label="start date" mask="date" :rules="['date']">
        <template v-slot:append>
            <q-icon name="event" class="cursor-pointer">
              <q-popup-proxy>
                <q-date v-model="startdate" />
              </q-popup-proxy>
            </q-icon>
          </template>
        </q-input>
    

    and for some reason, there is a thick padding at the bottom of this field even though I have not added it. it appears that the class .q-field--with-bottom is being added for some reason and this is adding the passing. Is there a simple way in the component to control this?



  • @ssuess
    I think the rules :rules="['date']" will cause this to be added. This is where the error messages go. Which are position: fixed because of the animation I think.

    Might be interesting to read
    https://github.com/quasarframework/quasar/issues/3357

    See also
    https://v1.quasar-framework.org/vue-components/input
    search for bottom-slots


Log in to reply