'Vuetify 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: app title truncated

If I reload the page, the tile returns to normal: enter image description here

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.

vue.jsvue-componentvuetify.js


Solution 1:[1]

try with this

 <v-app-bar-title class="text-no-wrap">{{ title }}</v-app-bar-title>

Solution 2:[2]

I found a solution that seemed to work in case it is useful:

<style>
.v-app-bar-title__content{
  width: 200px !important;
}
</style>

Solution 3:[3]

Try this... It worked for me

<v-app-bar-title class="title" >
    <div>{{ title }}</div>
</v-app-bar-title>

Solution 4:[4]

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;

Solution 5:[5]

if you want to add space between v-app-bar-titles then adding margin is the best i got here

<v-app-bar-title style="color:white" class="title">
        Title here
 </v-app-bar-title>
 <v-app-bar-title style="color:white " class="little ml-4">
 </v-app-bar-title>

Solution 6:[6]

Had the same problem.

Fixed with this

<style>
  v-app-bar-title__placeholder {
    text-overflow: clip;
  }
</style>

Solution 7:[7]

We can make use of the v-toolbar-title component. This worked for me!

Example for toolbar title

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Eduardo Jiménez
Solution 2 Jeff
Solution 3 Araoz
Solution 4
Solution 5 Abhinav Kumar
Solution 6 Luca Putzu
Solution 7 Akash Pai

Related Questions