CSS 스케일 속성을 사용할 때 Vuetify v-menu 드롭다운이 잘못된 위치에 표시됩니다.

Question

첨부된 사진과 같이 scale CSS 속성 사용시 v 메뉴 위치가 엉뚱한 곳에 있습니다.

해당 코드펜: https://codepen.io/satishvarada/pen/YzjGNVZ

v-autocomplete 구성 요소를 사용할 때도 비슷한 문제가 발생합니다.

으아아아 으아아아 으아아아

Answer 1

한 가지 방법은 left 속성을 사용하여 메뉴가 항상 왼쪽에 있도록 하는 것입니다.

편집-

또 다른 접근 방식은 attach 소품을 사용하여 메뉴를 상위 요소에 연결하여 구성 요소가 어떤 DOM 요소에 분리해야 하는지 알 수 있도록 하는 것입니다.

소품 2개를 사용한 데모입니다-

1. 확대/축소 속성이 있습니다-

으아악 으아악 으아악

2. 확대/축소 속성 없음 -

으아악 으아악