I have this with a date picker in it:

          <q-td>
           <q-input :model-value="`${dateRange.from} - ${dateRange.to}`" dense>
              <template v-slot:append>
              <q-icon name="event"  size="xs">
                <q-popup-proxy cover transition-show="scale" transition-hide="scale">
                  <q-date v-model="dateRange" range>
                    <div >
                      <q-btn v-close-popup label="Close" color="primary" flat/>
                    </div>
                  </q-date>
                </q-popup-proxy>
              </q-icon>
            </template>
          </q-input>
          </q-td>

By default, the size of the box is very small and onlyx a part of the text is visible.

On the DevTools, I've changed the CSS rule from

.q-field__native, .q-field__input {
    width: 100%;
}

to

.q-field__native, .q-field__input {
    width: auto;
}

and it works well here, but of course, it messes up the other q-fields on the page.

Is there any style or class what I could use to make this one q-input larger to make the text visible?

CodePudding user response：

     <q-td style="min-width: 300px">
       <q-input :model-value="`${dateRange.from} - ${dateRange.to}`" dense>
          <template v-slot:append>
          <q-icon name="event"  size="xs">
            <q-popup-proxy cover transition-show="scale" transition-hide="scale">
              <q-date v-model="dateRange" range>
                <div >
                  <q-btn v-close-popup label="Close" color="primary" flat/>
                </div>
              </q-date>
            </q-popup-proxy>
          </q-icon>
        </template>
      </q-input>
      </q-td>