CODEWITHSUNDEEP
vue.jsvue-componentvuetify.js
Dylan Frost
Dylan Frost

Reputation: 471

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.

Upvotes: 18

Views: 9762

Answers (12)

Shaji Ahmed
Shaji Ahmed

Reputation: 91

If you look at the generated HTML, placing anything in between the tags i.e. <v-app-bar-title> text </v-app-bar-title> will be rendered in a nested div with the class v-app-bar-title__content. The nested content has a default width which truncates the text.

However if one uses the v-text option to render the content, the nested div is not used, i.e. <v-app-bar-title v-text="text" />.

Another alternative is to use <v-toolbar-title> instead, which works in a similar fashion but allows this format <v-toolbar-title> text </v-toolbar-title>.

Upvotes: 0

fastkiller
fastkiller

Reputation: 21

This solution worked for me if you are using Vuetify 3:

.v-toolbar-title__placeholder{
  width: 200px !important;
}

Upvotes: 0

Tohov
Tohov

Reputation: 1

If you show the placeholder and hide the content in the v-app-bar-title, it seems to work.

.v-app-bar-title__placeholder {
  visibility: visible !important;
}
.v-app-bar-title__content {
  visibility: hidden !important;
}

Upvotes: 0

nikiforovpizza
nikiforovpizza

Reputation: 576

I had the same issue and didn't want to use !important. So I've just replaced v-app-bar-title with v-toolbar-title and had no this truncation issue any more :)

Upvotes: 1

Felix B&#246;hme
Felix B&#246;hme

Reputation: 518

I had the truncating issue in Safari. Chrome was working fine. I was able to fix by adding class="grow"

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

Upvotes: 1

Luca Putzu
Luca Putzu

Reputation: 1456

Had the same problem.

Fixed with this

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

Upvotes: 0

emptygenome
emptygenome

Reputation: 1

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>

Upvotes: 0

Akash Pai
Akash Pai

Reputation: 11

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

Example for toolbar title

Upvotes: 0

Araoz
Araoz

Reputation: 183

Try this... It worked for me

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

Upvotes: 3

Jeff
Jeff

Reputation: 41

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

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

Upvotes: 4

Eduardo Jim&#233;nez
Eduardo Jim&#233;nez

Reputation: 378

try with this

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

Upvotes: 5

Jens van Hellemondt
Jens van Hellemondt

Reputation: 436

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;

Upvotes: 0

Related Questions