Vuetify: Badge does not display correctly on a button in the toolbar

Created on 29 Jun 2017  路  2Comments  路  Source: vuetifyjs/vuetify

Badge does not display correctly on a button in the toolbar even applying the class 'show-overflow' to the button

Steps to reproduce

In a v-toolbar fixed insert a v-btn on this v-btn insert an v-icon finally to the v-icon place the property v-badged, the v-badged is hidden by the v-btn layer.

<v-toolbar fixed>
  <v-btn icon light>
    <v-icon v-badge="{ value: '99', overlap: true }" class="red--after">notifications</v-icon>
  </v-btn>
</v-toolbar>

Versions

Vue 2.3.4
Vuetify 0.12.7

What is expected ?

Show the badge over the button in a toolbar.

What is actually happening ?

Badge does not display correctly on a button whit icon in a toolbar.
Badge is hidden by the button layer.

Reproduction Link

https://codepen.io/xotion/pen/eRVzZd

bug

Most helpful comment

Updated, sorry for that my english is not good and was my first post on github thanks

All 2 comments

I did ask you to put this here, but please adhere to the guidelines for posting. You should be provided with a boilerplate template for issues when you attempt to create one. The structure is there for a reason. Can you please update this?

Updated, sorry for that my english is not good and was my first post on github thanks

Was this page helpful?
0 / 5 - 0 ratings

Related issues

aaronjpitts picture aaronjpitts  路  3Comments

dschreij picture dschreij  路  3Comments

dohomi picture dohomi  路  3Comments

chriswa picture chriswa  路  3Comments

cawa-93 picture cawa-93  路  3Comments