Vue Material Dashboard Pro - Material Design Admin

Home Page: https://demos.creative-tim.com/vue-material-dashboard-pro

vue-material admin-dashboard creative-tim premium-template material-design material-ui vue vue-cli

ct-vue-material-dashboard-pro's Introduction

Vue Material Dashboard PRO

Vue Material Dashboard PRO is a beautiful resource built over Vue Material and Vuejs. It will help you get started developing dashboards in no time. Vue Material Dashboard PRO is the official Vuejs version of the Original Material Dashboard. Using the Dashboard is pretty simple but requires basic knowledge of Javascript, Vuejs and Vue Router.

We have created it thinking about things you actually need in a dashboard. Vue Material Dashboard PRO contains handpicked and optimised Vuejs plugins. Everything is designed to fit with one another. As you will be able to see, the dashboard you can access on Creative Tim is a customisation of this product.

Let us know what you think and what we can improve below. And good luck with development!

Special thanks

During the development of this dashboard, we have used many existing resources from awesome developers. We want to thank them for providing their tools open source:

Chartist for the wonderful charts
Tristan Edwards for the Sweet Alert2
Kirill Lebedev for jVector Maps
Nepcha Analytics for the analytics tool. Nepcha is already integrated with Vue Material Dashboard PRO You can use it to gain insights into your sources of traffic.

Let us know your thoughts below. And good luck with development!

Versions
Demo
Quick Start
Documentation
File Structure
Browser Support
Resources
Reporting Issues
Technical Support or Questions
Licensing
Useful Links

Versions

Vue	React	Angular	HTML

Demo

Quick start

Quick start options:

Buy from Creative Tim

Documentation

The documentation for the Material Dashboard Pro is hosted at our website.

File Structure

Within the download you'll find the following directories and files:

vue-material-dashboard-pro/
├── CHANGELOG.md
├── README.md
├── babel.config.js
├── package.json
├── postcss.config.js
├── public
│   ├── img
│   └── index.html
├── src
│   ├── App.vue
│   ├── assets
│   │   ├── css
│   │   └── scss
│   │       ├── material-dashboard.scss
│   │       └── md
│   ├── components
│   │   ├── AnimatedNumber.vue
│   │   ├── Badge.vue
│   │   ├── Cards
│   │   │   ├── ChartCard.vue
│   │   │   ├── GlobalSalesCard.vue
│   │   │   ├── LockCard.vue
│   │   │   ├── LoginCard.vue
│   │   │   ├── NavTabsCard.vue
│   │   │   ├── PricingCard.vue
│   │   │   ├── ProductCard.vue
│   │   │   ├── SignupCard.vue
│   │   │   ├── StatsCard.vue
│   │   │   └── TestimonialCard.vue
│   │   ├── Collapse.vue
│   │   ├── Dropdown.vue
│   │   ├── Inputs
│   │   │   └── IconCheckbox.vue
│   │   ├── Modal.vue
│   │   ├── NotificationPlugin
│   │   │   ├── Notification.vue
│   │   │   ├── Notifications.vue
│   │   │   └── index.js
│   │   ├── Pagination.vue
│   │   ├── SidebarPlugin
│   │   │   ├── SideBar.vue
│   │   │   ├── SidebarItem.vue
│   │   │   └── index.js
│   │   ├── Slider.vue
│   │   ├── Tables
│   │   │   └── GlobalSalesTable.vue
│   │   ├── Tabs.vue
│   │   ├── Timeline
│   │   │   ├── TimeLine.vue
│   │   │   └── TimeLineItem.vue
│   │   ├── Wizard
│   │   │   ├── Wizard.vue
│   │   │   ├── WizardTab.vue
│   │   │   └── throttle.js
│   │   ├── WorldMap
│   │   │   ├── AsyncWorldMap.vue
│   │   │   ├── WorldMap.vue
│   │   │   └── world_map.js
│   │   └── index.js
│   ├── globalComponents.js
│   ├── globalDirectives.js
│   ├── main.js
│   ├── material-dashboard.js
│   ├── pages
│   │   ├── Dashboard
│   │   │   ├── Calendar.vue
│   │   │   ├── Charts.vue
│   │   │   ├── Components
│   │   │   │   ├── Buttons.vue
│   │   │   │   ├── GridSystem.vue
│   │   │   │   ├── Icons.vue
│   │   │   │   ├── Notifications.vue
│   │   │   │   ├── Panels.vue
│   │   │   │   ├── SweetAlert.vue
│   │   │   │   └── Typography.vue
│   │   │   ├── Dashboard.vue
│   │   │   ├── Forms
│   │   │   │   ├── ExtendedForms.vue
│   │   │   │   ├── RegularForms.vue
│   │   │   │   ├── ValidationForms
│   │   │   │   │   ├── LoginForm.vue
│   │   │   │   │   ├── RangeValidationForm.vue
│   │   │   │   │   ├── RegisterForm.vue
│   │   │   │   │   └── TypeValidationForm.vue
│   │   │   │   ├── ValidationForms.vue
│   │   │   │   ├── Wizard
│   │   │   │   │   ├── FirstStep.vue
│   │   │   │   │   ├── SecondStep.vue
│   │   │   │   │   └── ThirdStep.vue
│   │   │   │   └── Wizard.vue
│   │   │   ├── Layout
│   │   │   │   ├── Content.vue
│   │   │   │   ├── ContentFooter.vue
│   │   │   │   ├── DashboardLayout.vue
│   │   │   │   ├── Extra
│   │   │   │   │   ├── MobileMenu.vue
│   │   │   │   │   └── UserMenu.vue
│   │   │   │   └── TopNavbar.vue
│   │   │   ├── Maps
│   │   │   │   ├── API_KEY.js
│   │   │   │   ├── FullScreenMap.vue
│   │   │   │   ├── GoogleMaps.vue
│   │   │   │   ├── VectorMaps.vue
│   │   │   │   ├── WorldMap.vue
│   │   │   │   └── world_map.js
│   │   │   ├── Pages
│   │   │   │   ├── AuthLayout.vue
│   │   │   │   ├── Lock.vue
│   │   │   │   ├── Login.vue
│   │   │   │   ├── Pricing.vue
│   │   │   │   ├── Register.vue
│   │   │   │   ├── RtlSupport.vue
│   │   │   │   ├── TimeLinePage.vue
│   │   │   │   ├── UserProfile
│   │   │   │   │   ├── EditProfileForm.vue
│   │   │   │   │   └── UserCard.vue
│   │   │   │   └── UserProfile.vue
│   │   │   ├── Tables
│   │   │   │   ├── ExtendedTables.vue
│   │   │   │   ├── PaginatedTables.vue
│   │   │   │   ├── RegularTables.vue
│   │   │   │   └── users.js
│   │   │   └── Widgets.vue
│   │   └── index.js
│   └── routes
│       └── routes.js
├── vue.config.js

Browser Support

At present, we officially aim to support the last two versions of the following browsers:

Resources

Live Preview
Buy Page: https://www.creative-tim.com/product/vue-material-dashboard-pro
Documentation is here
License Agreement: https://www.creative-tim.com/license
Support: https://www.creative-tim.com/contact-us
Issues: Github Issues Page
Vue Material Dashboard - demo
For Front End Development - Material Kit Pro
Nepcha Analytics - Analytics tool for your website

Reporting Issues

We use GitHub Issues as the official bug tracker for the Material Dashboard Pro. Here are some advices for our users that want to report an issue:

Make sure that you are using the latest version of the Material Dashboard Pro. Check the CHANGELOG from your dashboard on our website.
Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed.
Some issues may be browser specific, so specifying in what browser you encountered the issue might help.

Technical Support or Questions

If you have questions or need help integrating the product please contact us instead of opening an issue.

Licensing

Copyright 2022 Creative Tim (https://www.creative-tim.com)
Creative Tim license

Useful Links

More products from Creative Tim
Vue products from Creative Tim
Tutorials
Freebies from Creative Tim
Affiliate Program (earn money)

Social Media

Twitter: https://twitter.com/CreativeTim

Facebook: https://www.facebook.com/CreativeTim

Dribbble: https://dribbble.com/creativetim

Google+: https://plus.google.com/+CreativetimPage

Instagram: https://instagram.com/creativetimofficial

ct-vue-material-dashboard-pro's People

Contributors

Stargazers

Watchers

ct-vue-material-dashboard-pro's Issues

error options of undefined

Prerequisites

Please answer the following questions for yourself before submitting an issue.

[yes ] I am running the latest version
[yes ] I checked the documentation and found no answer
[yes ] I checked to make sure that this issue has not already been filed
[yes] I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

Web not show error

Current Behavior

After I npm install and run dev I got error like this Error in render: "TypeError: Cannot read property 'options' of undefined" found in AuthLayout.vue

Selecting a date in datepicker within a modal closes both the datepicker and the modal

Expected Behavior

Selecting a date in datepicker within a modal should close only the datepicker

Current Behavior

Selecting a date in datepicker within a modal closes both the datepicker and the modal

Syntax Error: unexpected token

Prerequisites

Please answer the following questions for yourself before submitting an issue.

I am running the latest version
I checked the documentation and found no answer
I checked to make sure that this issue has not already been filed
I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

Compile with no errors

Current Behavior

Getting Syntax Error: unexpected token, so it's not compiling with npm run dev

Operating System: CENTOS 7
Browser and Version: Chrome Latest

So, i'm trying to install the template on Laravel, but whenever i try to compile, i got this errors:

Can anyone help me to set this up correctly?

"Minimize" sidebar after click on a router-link

Can you please tell me how to minimize the sidebar after the user clicks on any link, let's say i want to go to the main dashboard, if i click on the sidebar link, the sidebar keeps open, i want to close the sidebar after the click, so the user can see the content right away.

Thanks in advance

MD Autocomplete dropdown list won't stay under the input field

Prerequisites

Please answer the following questions for yourself before submitting an issue.

I am running the latest version
I checked the documentation and found no answer
I checked to make sure that this issue has not already been filed
I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

When appearing the drowpdown list on the md-autocomplete it should stay under the input field.

Current Behavior

the dropdown list moves around and won't stick under the field, and if you change the orientation of the phone to landscape nothing is shown, if you change it again to portrait, the look is even worst.

Please help with this!

Failure Information (for bugs)

you can't reproduce this unless you show a md-autocomplete field on mobile, your demo won't show the search box on mobile, so this issue happens and it's very confusing

Device: iphone 8
Operating System: iOS 12
Browser and Version: Safari on mobile (latest)

vue material dashboard PRO the scroll does not return top

I am using vue-material-dashboard-pro. When changing the component in vue-router the scroll does not return top, it remains in the same place as the previous page.

I already use the scrollBehavior mentioned in the vue-router documentation, but it only works once, and for the next time I change the page, it does not work anymore.

No validations for datepicker

Using a datepicker with validations does not work, consider this example:

<md-datepicker
    v-model="form.date"
    data-vv-name="date"
    v-validate= "modelValidations.date"
    required>
    <label>Date</label>
</md-datepicker>

It is not validated.

installation instruction missing in the documentation

Thanks for the wonderful library. We have purchased this theme and were planning to use it in our existing vue.js project, however unlikely we are unable to find the correct way to install this library. All we got is a zip file with components. Can you please suggest a proper way to install this library in existing vuejs project? We would also be looking forward to receive bug fixes if any, please suggest how would the bug fixes be updated to our project.

Wizard - Form Data Submission

The Wizard isn't submitting the form, nor does it seem to be collecting the data across all three tabs for submission. I've noticed that the wizardComplete() method isn't being used.

Am I missing something here? I thought it was functional on the demo... I combed the docs to no avail. Thanks in advance!

Cannot change default text color

Prerequisites

Please answer the following questions for yourself before submitting an issue.

[x ] I am running the latest version
I checked the documentation and found no answer
I checked to make sure that this issue has not already been filed
I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

According to the documentation it states that the brand-primary color can be changed however, it always stays purple.

Current Behavior

Primary text color not changing.

Failure Information (for bugs)

Please help provide information about the failure if this is a bug. If it is not a bug, please remove the rest of this template.

Steps to Reproduce

Please provide detailed steps for reproducing the issue.

Attempt to modify line 28 (per docs) brand-primary color from purple to anything else.

Context

Please provide any relevant information about your setup. This is important in case the issue is not reproducible except for under certain conditions.

Device: Surface book
Operating System: Windows 10
Browser and Version: Chrome - latest

Please help me, about the popup with simple-wizard

How can I make the popup with simple-wizard, and scroll the popup content?

Wizard Form Validation

Hi,
In WizardForm, when I validating a Step, incorrect fields after pressing the "next" button after a couple of seconds starts look like valid.
p.s. It's from your Demo.

Missing ESLint configuration in vanilla install of pro package

I'm having trouble getting things up and running when following the instructions at https://www.creative-tim.com/product/vue-material-dashboard-pro.

Current Behavior

yarn serve (and also npm run dev) complains of a missing ESLint configuration.

$ yarn serve
yarn run v1.6.0
$ vue-cli-service serve --open
 INFO  Starting development server...
 94% after seal

 ERROR  Failed to compile with 1 errors                                                                                                                                                                                                     10:15:34 AM

Module build failed (from ./node_modules/eslint-loader/index.js):
Error: No ESLint configuration found.
    at Config.getLocalConfigHierarchy ([Project-path]/node_modules/eslint/lib/config.js:255:39)
    at Config.getConfigHierarchy ([Project-path]/node_modules/eslint/lib/config.js:179:43)
    at Config.getConfigVector ([Project-path]/node_modules/eslint/lib/config.js:286:21)
    at Config.getConfig ([Project-path]/node_modules/eslint/lib/config.js:329:29)
    at processText ([Project-path]/node_modules/eslint/lib/cli-engine.js:163:33)
    at CLIEngine.executeOnText ([Project-path]/node_modules/eslint/lib/cli-engine.js:620:17)
    at lint ([Project-path]/node_modules/eslint-loader/index.js:229:17)
    at transform ([Project-path]/node_modules/eslint-loader/index.js:212:18)
    at [Project-path]/node_modules/loader-fs-cache/index.js:127:18
    at ReadFileContext.callback ([Project-path]/node_modules/loader-fs-cache/index.js:31:14)
    at FSReqWrap.readFileAfterOpen [as oncomplete] (fs.js:434:13)

You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.

Steps to Reproduce

Download the Pro package and unzip it.
Run npm install
Run npm run dev

Using the equivalent yarn commands seems to lead to the same results.

Context

$ node --version && yarn --version && npm --version && vue -V
v9.11.1
1.6.0
5.6.0
3.0.0-rc.5

Mac os x v10.11.6

How to fixed sidebar?

Hello!
How to fixed sidebar?

Tooltips are not showing in Firefox

Expected Behavior

Hovering over components with Tooltips should show the Tooltip on all browsers

Current Behavior

Hovering over components with Tooltips is not working when browsing with Firefox

Failure Information (for bugs)

Seen on Firefox version 63.0.1 (64-bit) but probably happens on later versions as well

Context

Expected here:
https://demos.creative-tim.com/vue-material-dashboard-pro/#/dashboard
In the product cards at the bottom of the page

tag in table bug

if tags in the table, tag's icon will change.

this is not in the table

this is in the table

how to fix it?

icon is not working

�I use font awesome
but it not working

Is there a way to consume component data in modal?

How to consume component data in modal?

i.e.
<component> <modal> <template slot="header"> use component data here using {{component.data}} </template> .... </modal> ... </component>

keep sidebar open

How can you keep the sidebar open when the dashboard loads firsttime

issue test

Prerequisites

Please answer the following questions for yourself before submitting an issue

I am running the latest version
I checked the documentation and found no answer
I checked to make sure that this issue has not already been filed
I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

Please describe the behavior you are expecting

Current Behavior

What is the current behavior?

Failure Information (for bugs)

Please help provide information about the failure if this is a bug. If it is not a bug, please remove the rest of this template.

Steps to Reproduce

Please provide detailed steps for reproducing the issue.

step 1
step 2
you get it...

Context

Please provide any relevant information about your setup. This is important in case the issue is not reproducible except for under certain conditions.

Device:
Operating System:
Browser and Version:

Failure Logs

Please include any relevant log snippets or files here.

Project is not compiling

Project is not compiling. I'm running latest node,npm,macOS all stable releases.

Here is the log after I did npm run install:clean

Syntax Error: SyntaxError: /Users/pathto/project/src/routes/routes.js: Support for the experimental syntax 'dynamicImport' isn't currently enabled (8:20):

6 |
7 | // Pages

8 | const User = ()=> import('@/pages/Dashboard/Pages/UserProfile.vue');
| ^
9 | const Pricing = ()=> import('@/pages/Dashboard/Pages/Pricing.vue');
10 | const TimeLine = ()=> import('@/pages/Dashboard/Pages/TimeLinePage.vue');
11 | const RtlSupport = ()=> import('@/pages/Dashboard/Pages/RtlSupport.vue');

Add @babel/plugin-syntax-dynamic-import (https://git.io/vb4Sv) to the 'plugins' section of your Babel config to enable parsing.

@ ./src/main.js 8:0-37 14:2-8
@ multi (webpack)-dev-server/client?http://192.168.0.200:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

============================================================
tried to add a .babelrc file and the @babel/plugin-syntax-dynamic-import plugin but is showing more errors more plugins to install etc.

Chartist not populating

Prerequisites

Please answer the following questions for yourself before submitting an issue.

[x ] I am running the latest version
[ x] I checked the documentation and found no answer
[x ] I checked to make sure that this issue has not already been filed
[x ] I'm reporting the issue to the correct repository (for multi-repository projects)

I'm getting a json response from my server with laravel, and i'm trying to fill the chartist values with it, it should get rendered but nothing is shown.

so, this is how it looks the initial data in my component:

dailySalesChart: {
                data: {
                    labels: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
                    series: [[]]
                },
                options: {
                    lineSmooth: this.$Chartist.Interpolation.cardinal({
                        tension: 0
                    }),
                    low: 0,
                    high: 2000, // creative tim: we recommend you to set the high sa the biggest value + something for a better look
                    chartPadding: {
                        top: 0,
                        right: 1,
                        bottom: 0,
                        left: 1
                    }
                }
            }

So i populate the array getting exactly 12 values from my server and push each of them with a forEach,

created () {
        let self = this
        axios.post('/user/dashboard/stats').then(response => {
            if (response.data.length !== 0) {
                console.log(response.data)

                let data = response.data

                data.forEach(function(e) {
                    self.dailySalesChart.data.series[0].push(Number(e.income_month))
                });
                self.yearTotal = 8999;
                console.log(self.dailySalesChart.data)
            }
        })
    },

in my console i can see the data is there, and seems ok to me:

but the chart is empty:

Any hints?

TopNavBar doesn't appear

Prerequisites

Please answer the following questions for yourself before submitting an issue.

[Y] I am running the latest version
[Y] I checked the documentation and found no answer
[Y] I checked to make sure that this issue has not already been filed

Expected Behavior

TopNavBar appear and function properly

Current Behavior

I purchased the material pro dashboard on 11/25/2018. Downloaded the latest version and completed npm install.

After running nmp run serve, the dashboard started up smoothly, everything function properly except the TopNavBar section didn't appear. Re-download and tried, problem not able to solve.

Animated-number, does not accept formatted numbers

Expected Behavior

Formatted number inside animated-number

Current Behavior

When we put some number with format, the component will only show part of the number.
Ex.: passing "234.567" the dashboard will show only "234"

What is the current behavior?
Describer above.
We saw in the documentation that formatted number's works if we split the value in 2 (or more) pieces and create an html tag for each one, but this is not the expected behaviour.

Steps to Reproduce

Please provide detailed steps for reproducing the issue.

Add an animated-number putting formatted number inside it (ex: 123.456)
Only the left part of the number will appear
you get it...

Context

Please provide any relevant information about your setup. This is important in case the issue is not reproducible except for under certain conditions.

Device: macbook pro
Operating System: mac os 10.14
Browser and Version: chrome Version 69.0.3497.100 (Official Build) (64-bit)

Unable to execute 'npm run build' in production environment

Expected Behavior

npm run build should create the production dist bundle that I can serve on a given machine

Current Behavior

Despite being able to build locally, whenever I try to run npm run build on an external resource (such as a Digital Ocean VM or Heroku machine), I receive the below error.

Failure Logs

root@nodejs-lazyq-dev:/var/www/html/Vue# npm run build

> [email protected] build /var/www/html/Vue
> vue-cli-service build


⠴  Building for production...

 ERROR  Failed to compile with 1 errors                                                                                                   09:29:00

 error  in ./src/assets/scss/_material-dashboard.scss

Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/lib/loader.js):

@import "md/plugins/fullCalendar";
^
      File to import not found or unreadable: md/plugins/fullCalendar.
      in /var/www/html/Vue/src/assets/scss/_material-dashboard.scss (line 59, column 1)
    at runLoaders (/var/www/html/Vue/node_modules/webpack/lib/NormalModule.js:286:20)
    at /var/www/html/Vue/node_modules/loader-runner/lib/LoaderRunner.js:364:11
    at /var/www/html/Vue/node_modules/loader-runner/lib/LoaderRunner.js:230:18
    at context.callback (/var/www/html/Vue/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at Object.asyncSassJobQueue.push [as callback] (/var/www/html/Vue/node_modules/sass-loader/lib/loader.js:55:13)
    at Object.done [as callback] (/var/www/html/Vue/node_modules/neo-async/async.js:7974:18)
    at options.error (/var/www/html/Vue/node_modules/node-sass/lib/index.js:294:32)

 @ ./src/material-dashboard.js 17:0-48
 @ ./src/main.js
 @ multi ./src/main.js

 ERROR  Build failed with errors.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `vue-cli-service build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2018-09-03T09_29_01_030Z-debug.log

Additionally, I have tried running npm rebuild node-sass, updated the material-dashboard.css file to include the underscore: _material-dashboard.css, passing --production in npm install --production, but am having no luck.

nodejs version: v8.11.4
npm version: v5.6.0

I've been trying to solve this for a few hours now but am not having any luck. I don't understand why it works locally but not when on another production machine.

need refund

Prerequisites

Please answer the following questions for yourself before submitting an issue.

I am running the latest version
I checked the documentation and found no answer
I checked to make sure that this issue has not already been filed
I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

Please describe the behavior you are expecting

Current Behavior

What is the current behavior?

Failure Information (for bugs)

Please help provide information about the failure if this is a bug. If it is not a bug, please remove the rest of this template.

Steps to Reproduce

Please provide detailed steps for reproducing the issue.

step 1
step 2
you get it...

Context

Please provide any relevant information about your setup. This is important in case the issue is not reproducible except for under certain conditions.

Device:
Operating System:
Browser and Version:

Failure Logs

Please include any relevant log snippets or files here.

Error in mounted hook: "TypeError: Cannot read property 'toFixed' of undefined"

Prerequisites

Please answer the following questions for yourself before submitting an issue.

I am running the latest version
I checked the documentation and found no answer
I checked to make sure that this issue has not already been filed
I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

Animate the numbers in cards

Current Behavior

Numbers stays at 0, and nothing happens, toFixed property cannot be read

Failure Information (for bugs)

So, i'm getting this error, and animated numbers are not working...

This is my AnimatedNumber.vue file:

here is the Dashboard.vue file

Nothing is shown... stays at zero

Console errors...

Thanks in advance for your help

Animated-number doesn't update

On the dashboard, there are some cards with animated numbers (<animated-number> tag). I tried to update the numbers via an api call, and the displayed numbers remain at their inital value.

Expected Behavior

The number animates after being updated

Current Behavior

The number doesn't animate and remains at the same value

Steps to Reproduce

Use an animated number and bind it with a data model e.g: <animated-number :value="myValue"></animated-number>

update myValue

nothing happens

Browser and Version: Firefox Quantum 61.0.2 (64 bits)

why in any page after refreshing F5 or Ctrl-R to show 404 error page?

it is a bug? or how to fix it?

Bug setting date in datepicker

Expected Behavior

Select a date

Current Behavior

Entire screen freeze after selecting a date

Failure Information (for bugs)

Entire screen freeze after selecting a date

Steps to Reproduce

See video recording available at this link

Context

Operating System: Mac OS 10.13.6
Browser and Version: Chrome 69.0.3497.81

Screen Jumps when selecting

Prerequisites

Please answer the following questions for yourself before submitting an issue.

I am running the latest version
I checked the documentation and found no answer
I checked to make sure that this issue has not already been filed (there is some similar issue but the fix wont work on my issue)
I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

Selecting from a md-select should just work normal and show the option without any issues

Current Behavior

md-select is jumping the first time is opened

This happens only on mobile, i'm testing it with an iPhone 8 with latest update, and happens the same on safari or chrome in the iphone.

jquery-jvectormap.min.js have problem

Hi!
I buy your theme is awesome
But have some error keep show up
Can you help me to fix this error ?

thank you

Printable version

Is there a way (or plugin) to print the dashboard screen like a report? Excluding icons and other images. Thanks.

Table with Checkboxes. When selecting the checkbox, the md-selected event does not occur!

screencast 2018-11-09 19-51-07.mp4.zip

Is there any way to use notifications in js file ?

Hi, is there any way to use notifications in js file ?
like this:
export const toast = (msg, type)=>{ notify(options) // here use notification, other js file and view use this method }

help me! I need to use npm run hot or npm run watch

Good afternoon, how do I run the commands "npm run watch" or "npm run hot" and the changes I make to the code are compiled automatically? Thank you

<md-autocomplete> Any plans to include this?

Hi, guys, i'm wondering if you are planing to support it would be really usefull, or if it's possible to use it now, can you show me how?

Where is the loading style

Hi, I can't find the loading style.
Used for when ajax or other actions that want show an overlay with a tip or icon.
Is there no style for loading?

Vue Material Dashboard PRO probelme scorling and taptouch

Hello ,

i have probelme with the tempalte pro Vue Material Dashboard PRO ,but it hase a probelme with scorling and not responsive

i have this message error :
[Violation] Added non-passive event listener to a scroll-blocking event. Consider marking event handler as 'passive' to make the page more responsive. See
perfect-scrollbar.jquery.min.js:2 [Violation] Added non-passive event listener to a scroll-blocking 'wheel' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
r.bind @ perfect-scrollbar.jquery.min.js:2
o.bind @ perfect-scrollbar.jquery.min.js:2
r @ perfect-scrollbar.jquery.min.js:2
e.exports @ perfect-scrollbar.jquery.min.js:2
(anonymous) @ perfect-scrollbar.jquery.min.js:2
e.exports @ perfect-scrollbar.jquery.min.js:2
(anonymous) @ perfect-scrollbar.jquery.min.js:2
each @ jquery.min.js:128
each @ jquery.min.js:53
t.fn.perfectScrollbar @ perfect-scrollbar.jquery.min.js:2
(anonymous) @ material-dashboard.min.js?v=2.0.2:1
perfect-scrollbar.jquery.min.js:2 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
r.bind @ perfect-scrollbar.jquery.min.js:2
o.bind @ perfect-scrollbar.jquery.min.js:2
r @ perfect-scrollbar.jquery.min.js:2
e.exports @ perfect-scrollbar.jquery.min.js:2

Set locale for datepicker

I have not found a way to set a locale for the datepicker. Could someone help?

select in modal what happen ?

the select will over modal and under the modal. please tell me how to fix it ?

notification w/o icon is not possible

'alert-with-icon' class is hardcoded in notification component, so it does not allow you to have a notification w/o icon. I am quite surprised how it is used on demo page.

Let me know if I can provide more information or help.

md-select multiple is error

The md-select multiple prop has issue.

But why the document works well ?

I just want to use multiple select and find this..

Safari search and icon sort problem

Hi! To fix the safari problem with icon sort and the search please follow the next steps:

First regard to the search input please go to the src/assets/scss/md/_inputs.scss and on line 396 add the appearance with value none like this:

.md-field{

  .md-input,
  .md-textarea{
    height: 36px;
    padding: 7px 0;
    font-size: 14px !important;
    -webkit-text-fill-color: $black-color !important;
    appearance: none;
  }

...

}

To fix the sort icon problem please go the src/assets/scss/md/_tables.scss and on lines 207 and 208 please change the values 44 and right with auto and 0 like this:

.paginated-table { 
...

.md-table-head.md-sortable .md-table-sortable-icon,
  .md-table-head.md-table-cell-selection+.md-sortable .md-table-sortable-icon{
    left: auto;
    right: 0;
  }
...
}

Regards,
Dragos

The tabs component is not responsive

The tabs component is not responsive in mobile mode, is it normal?

grid view documentation

Thank you for such amazing library.

I am planning to include vue-material-dashboard pro soon, unlikely I am unable to find documentation for grid system here.
Can you please confirm if there exist a documentation or not ?
Is it any how dependent on bootstrap ?

Tooltips of more than 30 characters text issue

Prerequisites

Please answer the following questions for yourself before submitting an issue.

I am running the latest version
I checked the documentation and found no answer
I checked to make sure that this issue has not already been filed
I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

Tooltips should show the text and be responsive

Current Behavior

If you want to show some text longer than 30 characters or so, the text overlaps the tooltip-box

Failure Information (for bugs)

Tooltips are not responsive with longer texts

Steps to Reproduce

Create your tooltip with any text longer than 30 characters or even more

Context

Please provide any relevant information about your setup. This is important in case the issue is not reproducible except for under certain conditions.

Device: On mobile and on desktop
Operating System: it doesn't really matter
Browser and Version: latest chrome browser version

md-select adds flicker when selecting

using md-select as shown on the documentation page.
When selecting the dropdown it add a temporary horizontal scrollbar and removed it immediately.
Please see the attached screenshot below

Tabs contents is not showing

Expected Behavior

The Tabs component should show tabs headers/buttons and tab content.

Current Behavior

Using the Tabs component shows the tabs headers/buttons but not the tab content.

Failure Information (for bugs)

You can see it in the Panels demo as well:
https://demos.creative-tim.com/vue-material-dashboard-pro/#/components/panels

Failure Logs

No logs

No datepicker is showed when opened inside a dialog

Expected Behavior

Show datepicker's widget

Current Behavior

Datepicker hides behind the popup modal

Failure Information (for bugs)

Open an dialog that contains a datepicker inside and then click inside the datepicker. No datepicker widget is shown.
When you close the dialog, the datepicker's widget is showed in the screen (actualy it already loaded, but behind the modal dialog)

Steps to Reproduce

open an dialog
click on any datepicker inside this dialog
you get it, no datepicker is showed

We've fixed this issue customizing both
.md-datepicker-overlay .md-datepicker-dialog classes adding the attribute z-index:9999

creativetimofficial / ct-vue-material-dashboard-pro Goto Github PK

ct-vue-material-dashboard-pro's Introduction

Special thanks

Table of Contents

Versions

Demo

Quick start

Documentation

File Structure

Browser Support

Resources

Reporting Issues

Technical Support or Questions

Licensing

Useful Links

Social Media

ct-vue-material-dashboard-pro's People

Contributors

Stargazers

Watchers

Forkers

ct-vue-material-dashboard-pro's Issues

Prerequisites

Expected Behavior

Current Behavior

Expected Behavior

Current Behavior

Prerequisites

Expected Behavior

Current Behavior

Prerequisites

Expected Behavior

Current Behavior

Failure Information (for bugs)

Prerequisites

Expected Behavior

Current Behavior

Failure Information (for bugs)

Steps to Reproduce

Context

Current Behavior

Steps to Reproduce

Context

Expected Behavior

Current Behavior

Failure Information (for bugs)

Context

Prerequisites

Expected Behavior

Current Behavior

Failure Information (for bugs)

Steps to Reproduce

Context

Failure Logs

Prerequisites

Prerequisites

Expected Behavior

Current Behavior

Expected Behavior

Current Behavior

Steps to Reproduce

Context

Expected Behavior

Current Behavior

Failure Logs

Prerequisites

Expected Behavior

Current Behavior

Failure Information (for bugs)

Steps to Reproduce

Context

Failure Logs

Prerequisites

Expected Behavior

Current Behavior

Failure Information (for bugs)

Expected Behavior

Current Behavior

Steps to Reproduce

Expected Behavior