I am currently working with Vuetify and have encountered an issue with a v-list-item that contains a title and a subtitle. The problem is that the title is restricted to displaying only one line. If the title exceeds this limit, it gets cut off and shows "...". I would like the subtitle to disappear and show the full title when I click on the list item. This action may cause the entire v-list-item to increase in height. To ensure a smooth transition without any sudden jumps in height, I am looking for a solution to implement a gradual expansion effect. Unfortunately, I haven't been able to resolve this challenge yet, so any suggestions or ideas would be greatly appreciated. Here's my current code:
<v-list-item three-line :class="{ activeListItem: currentPostId === post.id }">
<v-list-item-content>
<v-list-item-title :class="{'full-text': currentPostId === post.id}">
Title
</v-list-item-title>
<v-list-item-subtitle :class="{ 'post-subtitle-hidden': currentPostId === post.id }">
Subtitle
</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
CSS:
.activeListItem {
background-color: #c4e0ff !important;
}
.full-text {
white-space: normal;
}
.post-subtitle-hidden {
display: none;
}
.v-list-item__subtitle, .v-list-item__title {
-webkit-box-flex: 1;
-ms-flex: 1 1 100%;
flex: 1 1 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}