expandable search multiple min/max/width

user_19697316 0
Viewed 38

When search area is closed I want to 6% width but when it is opened It must be 150px size but when I try below codes it overrides and stay 150px fixed. How can ı fix this

.expanding-search {
  transition: 0.4s;
  max-width: 150px;
  min-width: 150px;
  width: 150px;
}

.closed {
  max-width: 6%;
}

 <v-text-field
     @focus="searchClosed = false"
     @blur="searchClosed = true"
     class="mr-5 rounded-lg"
     :class="['expanding-search',{'closed': searchClosed && search == null}]"
     v-model="search"
     :label="$t('company.dialog.search')"
     prepend-inner-icon="mdi-magnify"
     clearable
     solo
     dense
></v-text-field>
vuetify.js vue.js css
1 Answers

This is because you set min-width to 150px, remove it should be ok:

You want the close state width to be 6% and for open state, the width should be 150px, right?

.expanding-search {
  transition: 0.4s;
  max-width: 150px;
  width: 6%;
}

.closed {
  max-width: 6%;
}
user_39436320
Related