Vuetify 드롭다운 높이 감소

Vuetify 드롭다운 높이 감소

Vuetify 드롭다운 구성 요소의 높이를 줄일 수 없습니다.v-select소품도 써보고dense그러나 선택할 옵션의 높이만 줄일 뿐 닫힘 드롭다운에는 영향을 주지 않습니다.

다음 템플릿 코드를 시도했습니다.

<v-select :items="selectableYears" dense outlined></v-select>

설명서의 코드 예는 매우 유사합니다.

<v-select
    :items="items"
    label="Outlined style"
    dense
    outlined
></v-select>

문서: https://vuetifyjs.com/en/components/selects

Vuetify 드롭다운 높이를 조정하려면heightAPI. 다음과 같습니다.

<v-select
  :items="items"
  label="Standard"
  height="300px" // Height API
></v-select>

디폴트보다 작게 하려면 , 다음의 css 클래스를 써 주세요..v-text-field.v-text-field--solo .v-input__control의 래퍼입니다.v-select.

.v-text-field.v-text-field--solo .v-input__control{
    min-height: 30px;
}

예: https://codepen.io/fsaadatpei/pen/XWrvEGR

제가 사용한 Vuetify 버전(2.0.5)에서는 고밀도 소품만 일부 사용할 수 있는 것 같습니다.버전을 2.1.0으로 업그레이드하면 사용 시 닫힌 드롭다운 높이가 줄어듭니다.:dense="true"소품으로서.

언급URL : https://stackoverflow.com/questions/58202911/reducing-the-height-of-vuetify-dropdown