0
1.3K
ViewsVuetify v-app-bar-title component is truncated with plenty of room to spare
I am using a navigation bar in my Vue/Vuetify app, and added a v-app-bar-title component to display the name of the page the user is currently on. However, when I load certain pages, the title text becomes truncated, and only corrects itself if I reload the page. Here is an example of what I mean, I added a red border to the element to show that the text should have enough room: 
If I reload the page, the tile returns to normal: 
I tried adding the text-overflow: show property to the element, but this didn't seem to have any effect. I also added a min-width property, but this failed to change the title's behavior.
EDIT: Including a little extra code:
Here's the title component I'm using:
<v-app-bar-title class="title" >{{ title }}</v-app-bar-title>And here's the CSS for it:
.title {
flex-grow: 10;
color: var(--text-reverse);
text-overflow: show;
// border: 1px solid red;
}I did find a workaround by just replacing the v-app-bar-title component with a span, but that feels cheap and I'd like to be able to utilize as much of vuetify as possible.
5 answers
Answer question0
try with this
<v-app-bar-title class="text-no-wrap">{{ title }}</v-app-bar-title>
0
Great question. Could you share the code of your app-bar component, so we can have a look?
Update:
Is your v-app-bar-title directly in the v-app-bar?
Possible fix, I have never had to change flex-grow on Vuetify components. Have you tried removing the flex-grow?
Additionally you could try in your css title class:
text-overflow: clip;
overflow: visible;
0
Try this... It worked for me
<v-app-bar-title class="title" >
<div>{{ title }}</div>
</v-app-bar-title>
0
I found a solution that seemed to work in case it is useful:
<style>
.v-app-bar-title__content{
width: 200px !important;
}
</style>
0
We can make use of the v-toolbar-title component. This worked for me!
