search

creativetimofficial / vuetify-material-dashboard

Vuetify Material Dashboard - Open Source Material Design Admin by Creative Tim
https://www.creative-tim.com/product/vuetify-material-dashboard
MIT License
1.32k stars 959 forks source link

[Bug] Using vuetify components in Vuetify Material Dashboard #33

Open mh-abbassi opened 5 years ago

mh-abbassi commented 5 years ago

Version

It is reproducible with the latest stable version

Reproduction link

https://jsfiddle.net/

Operating System

Windows 10

Device

Microsot Surface Book

Browser & Version

Chrome Version 75.0.3770.100 (Official Build) (64-bit)

Steps to reproduce

  1. Add a vuetify button to Tim's Vuetify-Material-Dashboard:

    button1

  2. Add "fab" to it to make it round.

    button1

  3. The "fab" feature doesn't work.

    What is expected?

    The button to become round

    What is actually happening?

    The button stays a rectangle

Solution

Additional comments

I want to be able to use vuetify components and all of their features in Vuetify-Material-Dashboard but some of them like "Fab" feature don't work when you use vuetify components in Tim's Vuetify-Material-Dashboard. I believe it has to do with material design preventing certain vuetify features and components to load properly. Is there a way to do something that allows me to use vuetify in Vuetify-Material-Dashboard?

jiahong96 commented 5 years ago

It's because of the CSS in _buttons.scss. You may want to remove the button styling or overwrite some of the CSS in your component scope to make the Fab work.