CODEWITHSUNDEEP
vuetify.js
user2054381
user2054381

Reputation:

Vuetify: How to align icon and long text on the same row?

In my vue.js 2.5.7 / vuetify": "^1.0.8" application I use a card with a title containing some text and an icon to the left of text:

    <v-card class="p-3" tile="true">

        <v-card-title class="headline">
            <v-icon color="teal" class="a_link" v-if="confirm_modal_dialog_icon" left="true">{{ confirm_modal_dialog_icon }}</v-icon>
            {{ confirm_modal_dialog_confirm_text }}
        </v-card-title>

        <v-card-text v-if="confirm_modal_dialog_detailed_text">
            {{ confirm_modal_dialog_detailed_text }}
        </v-card-text>

If confirm_modal_dialog_confirm_text variable contains a long text then the title spans over two lines:

  1. icon
  2. text

Can I make icon (on the left) and long text to always display on the same row? If yes how?

Thanks!

Upvotes: 5

Views: 18414

Answers (2)

grim
grim

Reputation: 6769

You can use .text-truncate provided by Vuetify.

<v-card-title class="headline text-truncate">
  <v-icon color="teal" class="a_link" v-if="confirm_modal_dialog_icon">
    {{ confirm_modal_dialog_icon }}
  </v-icon>
  {{ confirm_modal_dialog_confirm_text }}
</v-card-title>

Also I think you can drop the left="true" on the v-icon. The documentation states that this is for buttons.

Upvotes: 3

kottartillsalu
kottartillsalu

Reputation: 90

The problem as you describe it happens because the text does not fit inside the v-card-title tag. One way to solve this is to add the below css.

Use white-space: nowrap;. Or you could add a class to v-card-title like this little snippet of code:

.one-line {
  overflow: hidden; 
  text-overflow: ellipsis;
  white-space: nowrap;
}

This Codepen illustrates how it works.

Upvotes: 3

Related Questions