如何限制Vuetify扩展面板的高度,使面板标题不会溢出父面板?

lymnna71  于 2023-03-03  发布在  Vue.js
关注(0)|答案(1)|浏览(215)

我有一个扩展面板,它位于一个div内部,具有固定的高度。目前,当一个面板扩展时,打开的面板会将所有其他面板推到父div的溢出处,这使它们不可见,迫使用户要么关闭打开的面板,要么向下滚动以查看其他标题。
这是一个来自Vuetify的例子。
我尝试限制扩展面板的高度,这样当您打开一个面板时,其他面板的标题会被推到父div的底部,但不会被推到溢出位置。然后,我希望能够滚动打开的面板的内容,因为内容无法全部放入父div。这样,用户可以滚动打开的内容,同时仍然能够看到其它面板的标题
Example of how I would like the expansion panel to appear
我尝试将v-expansion-panelsv-expansion-panelmax-height设置为100%,但面板在打开时总是比父容器大。我还尝试将v-panel-title的位置设置为固定,以便在滚动时固定到父div的底部,但整个扩展面板在我尝试时都断开了。

fdx2calv

fdx2calv1#

如果面板的数量始终相同,则可以执行以下操作:

.v-expansion-panel-text__wrapper {
    max-height: calc(300px - 64px - (2 * 48px));
}

48px对应于非活动面板标题高度:https://vuetifyjs.com/en/api/v-expansion-panel/#sass-expansion-panel-title-min-height
64px对应于活动面板标题高度:https://vuetifyjs.com/en/api/v-expansion-panel/#sass-expansion-panel-active-title-min-height
(if您正在使用sass,可以使用Vuetify sass变量)

相关问题