I am using material tabs as page subcategories in which there are multiple chartist charts. The problem is that chars does not show up except for first active tab. It seems that width comes as 0.

Version

v3.0.0 (according to the page source of demo dashboard page)

Reproduction link

https://demos.creative-tim.com/material-dashboard/pages/dashboard.html

Operating System

macOS 10.15.7

Device

iMac 21" (late 2013 model)

Browser & Version

Safari 15.1

Steps to reproduce

1. Open the Creative Tim's Material Dashboard demo link (https://demos.creative-tim.com/material-dashboard/pages/dashboard.html)
2. Notice the lower-left corner "Upgrade to Pro" button. In Safari, it is a grey rectangle (in other browsers like Chrome, it's a pink button)
3. The style of Drop Down box (<select class="form-control">) is also different. In Safari, the down arrow is missing.

What is expected?

Expected that the visual styles of the Material Dashboard are identical across different browsers.

What is actually happening?

Safari does not show the correct styles.

Solution

As a workaround, set the following CSS:

.btn-primary, .btn.bg-gradient-primary {
    -webkit-appearance: none;
}

Additional comments

Screenshots: https://imgur.com/a/ut6vT5s

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
• [ ] I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

I´m looking for the first render but i can´t.

Current Behavior

Failed to Compile. ./src/assets/scss/argon-dashboard-react.scss (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--6-oneOf-5-3!./node_modules/sass-loader/dist/cjs.js??ref--6-oneOf-5-4!./src/assets/scss/argon-dashboard-react.scss) To import Sass files, you first need to install node-sass. Run npm install node-sass or yarn add node-sass inside your workspace. Require stack:

• C:\Users\dsabi\Downloads\argon-dashboard-react-master\argon-dashboard-react-master\node_modules\sass-loader\dist\getDefaultSassImplementation.js
• C:\Users\dsabi\Downloads\argon-dashboard-react-master\argon-dashboard-react-master\node_modules\sass-loader\dist\getSassImplementation.js
• C:\Users\dsabi\Downloads\argon-dashboard-react-master\argon-dashboard-react-master\node_modules\sass-loader\dist\index.js
• C:\Users\dsabi\Downloads\argon-dashboard-react-master\argon-dashboard-react-master\node_modules\sass-loader\dist\cjs.js
• C:\Users\dsabi\Downloads\argon-dashboard-react-master\argon-dashboard-react-master\node_modules\loader-runner\lib\loadLoader.js
• C:\Users\dsabi\Downloads\argon-dashboard-react-master\argon-dashboard-react-master\node_modules\loader-runner\lib\LoaderRunner.js
• C:\Users\dsabi\Downloads\argon-dashboard-react-master\argon-dashboard-react-master\node_modules\webpack\lib\NormalModule.js
• C:\Users\dsabi\Downloads\argon-dashboard-react-master\argon-dashboard-react-master\node_modules\webpack\lib\NormalModuleFactory.js
• C:\Users\dsabi\Downloads\argon-dashboard-react-master\argon-dashboard-react-master\node_modules\webpack\lib\Compiler.js
• C:\Users\dsabi\Downloads\argon-dashboard-react-master\argon-dashboard-react-master\node_modules\webpack\lib\webpack.js
• C:\Users\dsabi\Downloads\argon-dashboard-react-master\argon-dashboard-react-master\node_modules\react-scripts\scripts\start.js

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

Want to have a multi level drop down in the nabar.

Current Behavior

I have used the class submenu as mentioned in bootstrap 4 documentation. But no luck!

Hi, i try to run this material-dashboard angular app in Asp.Net MVC 5 and i have error:

core.es5.js:1020 ERROR ReferenceError: $ is not defined at HomeComponent.Array.concat.HomeComponent.ngOnInit (home.component.ts:19) at checkAndUpdateDirectiveInline (core.es5.js:10843) at checkAndUpdateNodeInline (core.es5.js:12341) at checkAndUpdateNode (core.es5.js:12284) at prodCheckAndUpdateNode (core.es5.js:12974) at Object.eval [as updateDirectives] (HomeComponent_Host.ngfactory.js:9) at Object.updateDirectives (core.es5.js:12718) at checkAndUpdateView (core.es5.js:12251) at callViewAction (core.es5.js:12599) at execEmbeddedViewsAction (core.es5.js:12557)

home.components.ts (19 line): ngOnInit() { $.getScript('../../../assets/js/material-dashboard.js'); $.getScript('../../../assets/js/initMenu.js'); }

If i run this app with 'ng serve' (without mvc app), it builds the application and starts a web server and everythink is ok.

But if i try to do it following steps: 1.)ng build 2.)move directory 'dist' to my mvc app (target operation of copy : MyMvcWeb\Scripts\NgApp )

My view in mvc app:

@{ Layout = null; }

Anyone knows what is wrong, what i have to do more or what is the problem?

If you add an image, or create a multi line text... Any element which height is bigger than the actual "CREATIVE TIM" text, the wrapper is adding additional space towards the bottom of the page and sidebar "floats"...

~I fixed it by switching to height: auto or directly removing that line:~ (nvm, it doesnt fix the problem, because you can't scroll down on smaller screens, probably the best way is to set overflow-y:hidden for body .wrapper) https://github.com/creativetimofficial/material-dashboard/blob/master/assets/css/material-dashboard.css#L445

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)

Expected Behavior

Please describe the behavior you are expecting I would like to use the Material Dashboard (Design) for Laravel and the Editor (Datatables.net).

Current Behavior

What is the current behavior?

Failure Information (for bugs)

I can only use the the function from the sidebar OR the Editor (from datatables.net) 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.

1. step 1
2. step 2
3. 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. To use the Editor (datatables.net) in my material-Dashboard for laravel project, I need to create and use an app.js/bootrap.js. My app.blade.php looks like this:

My app.js looks like this: require('./bootstrap');

And my bootsrap.js looks like this: window._ = require('lodash');

/**

• We'll load jQuery and the Bootstrap jQuery plugin which provides support
• for JavaScript based Bootstrap features such as modals and tabs. This
• code may be modified to fit the specific needs of your application. */

try { window.Popper = require('popper.js').default; window.$ = window.jQuery = require('jquery');

require('bootstrap');
require('datatables.net-bs4');
require('datatables.net-buttons-bs4');
require('datatables.net-select-bs4');
require('datatables.net-editor-bs4');

} catch (e) {}

/**

• We'll load the axios HTTP library which allows us to easily issue requests
• to our Laravel back-end. This library automatically handles sending the
• CSRF token as a header based on the value of the "XSRF" token cookie. */

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

/**

• Echo exposes an expressive API for subscribing to channels and listening
• for events that are broadcast by Laravel. Echo and event broadcasting
• allows your team to easily build robust real-time web applications. */

// import Echo from 'laravel-echo';

// window.Pusher = require('pusher-js');

// window.Echo = new Echo({ // broadcaster: 'pusher', // key: process.env.MIX_PUSHER_APP_KEY, // cluster: process.env.MIX_PUSHER_APP_CLUSTER, // encrypted: true // });

Prerequisites

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

• [ Yes, Material Dashboard Pro - v2.1.0 ] I am running the latest version
• [ No ] 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

Please describe the behavior you are expecting On npm install, I'm expecting no warnings for deprecated: npm WARN deprecated [email protected]: You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1 Please provide instructions to upgrade

Current Behavior

What is the current behavior? npm WARN deprecated [email protected]

I think the way the brand-primary color is being implemented right now can be somewhat misleading, as it's based on the components having the data-color set to purple. So, changing the primary color to light-blue and having the data-color set to purple... I suggest setting a the data-color across the project pointing to something like: 'primary' so it can be easier to understand.

Also, this is about the angular material dashboard, all the data-colors for the primary color has been set to "red" so, changing the variable in line 28 of _colors has no effect.

Hi,

I would like us to include data validation and text editor plugins. They are a must have on the admin dashboard panels.

I would like if we could edit the summernote js plugin fetched from https://summernote.org css and js code to fit in with material design principles. And also edit the jquery validation plugin js fetched from https://jqueryvalidation.org as suggestions.

Please, I have used your material dashboard plugin to develop an admin panel for one of my clients and they like it. But now these two plugins are required and I don't know where to start or to go about it.

Any advice will be much appreciated.

Hi! I have an issue with a checkbox. It works only twice. On the gif you can see that I click and then do it again. Checkbox changes it's state. And when I click on it again, it does not change the state. The head content is following:

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Edit</title>
    <script src="/Scripts/jquery-3.1.0.js"></script>
<script src="/Scripts/jquery-ui-1.9.0.js"></script>

    <script src="/Scripts/moment.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>

    <script src="/Scripts/bootstrap-datetimepicker.js"></script>

    <link href="/Content/bootstrap.css" rel="stylesheet"/>

    <link href="/Content/bootstrap-datetimepicker.css" rel="stylesheet"/>

    <script src="/Scripts/bootstrap-select.js"></script>

    <script src="/Scripts/material-dashboard/material.min.js"></script>
<script src="/Scripts/material-dashboard/bootstrap-notify.js"></script>
<script src="/Scripts/material-dashboard/bootstrap-checkbox-radio.js"></script>
<script src="/Scripts/material-dashboard/material-dashboard.js"></script>

    <script src="/Scripts/modernizr-2.6.2.js"></script>

    <link href="/Content/Site.css" rel="stylesheet"/>

    
    <script src="/Scripts/cvpr/FileUploadHelper.js"></script>
<script src="/Scripts/cvpr/GeneralSettings.js"></script>
<script src="/Scripts/cvpr/Sessions.js"></script>
<script src="/Scripts/cvpr/Speakers.js"></script>

    <link href="/Content/bootstrap-select.css" rel="stylesheet"/>

    <link href="/Content/material-dashboard/material-dashboard.css" rel="stylesheet"/>

    
    <!--Icons, list is here: http://materializecss.com/icons.html -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>

I work with ASP.NET, so this is the way I use a checkbox:

<div class="form-group">
            <div class="checkbox col-md-offset-2 col-lg-offset-2">
                <label class="control-label">
                    @Html.CheckBoxFor(model => model.IsHidden) Is Hidden
                </label>
                @Html.ValidationMessageFor(model => model.IsHidden, "", new { @class = "text-danger" })
            </div>
        </div>

Please, help me to fix the issue.

What is your enhancement?

hello,

I've suscribe Pro subcription, and I've problem for use simpledatatable with Ajax and Fetch request in Jquery. Can you help me ?

Version

2.12

Reproduction link

https://demos.creative-tim.com/material-dashboard/docs/2.1/getting-started/introduction.html

Operating System

Mac

Device

Mac

Browser & Version

Chrome

Steps to reproduce

1: Download code from Github 2: Try to run minimal Flask app serving "basic template" 3: It does not work because the

What is expected?

The page is styled.

What is actually happening?

The page is completely unstyled. No CSS whatsoever.

Solution

Buy a different template

Additional comments

Version

v2.1.0

Reproduction link

https://github.com/twbs/bootstrap/issues/30553#issuecomment-612617589

Operating System

Ubuntu

Device

PC and Mobile

Browser & Version

All Browsers

Steps to reproduce

1. Create a site using material design
2. Try to add JS9: https://js9.si.edu/
3. add static files. refer to js9support.min.js as example shows.

What is expected?

When navbar-toggler width data-target of #navigation-example is clicked an animation to open a side bar is expected.

What is actually happening?

An error says TypeError: Cannot convert object to primitive value and no side bar is opened

Solution

https://github.com/twbs/bootstrap/issues/30553#issuecomment-612617589

chanhed this line: if (!i && l.toggle && /show|hide/.test(t) && (l.toggle = !1), i || (i = new r(this, l), o.data(n, i)), 'string' == typeof t) {

to this: if (!i && l.toggle && /show|hide/.test(l) && (l.toggle = !1), i || (i = new r(this, l), o.data(n, i)), 'string' == typeof t) {

Additional comments

Unfortunately my code is not in production. So I cannot create a codepen etc...

Version

BS5

Reproduction link

https://github.com/Seneca-CDOT/telescope/issues/2691

Operating System

Windows/OS

Device

PC

Browser & Version

Chrome Version 97.0.4692.99

Steps to reproduce

ReferenceButtons is not always defined, See https://github.com/creativetimofficial/material-dashboard/blob/66716686d10a8f1ed754f93bb52b3a922db1ffcf/assets/js/material-dashboard.js#L626.

We should protect this.

What is expected?

There should not be any errors in console due to undefined variables.

What is actually happening?

Error in console: Uncaught TypeError: Cannot read properties of null (reading 'classList') at 'navbarColorOnResize.

Solution

use optional chaining as below: if (referenceButtons?.classList.contains('active') && referenceButtons?.getAttribute('data-class') === 'bg-transparent') {

Additional comments

I'd be happy to contribute the fix for this.

Version

master

Reproduction link

https://gitlab.com/ldath-core/examples/ex-material-dashboard/-/pipelines/430662461

Operating System

linux

Device

docker

Browser & Version

terminal

Steps to reproduce

npm install when having installed node 16

What is expected?

installing packages from package.json

What is actually happening?

npm ERR! make: *** [binding.target.mk:133: Release/obj.target/binding/src/binding.o] Error 1 npm ERR! gyp ERR! build error npm ERR! gyp ERR! stack Error: make failed with exit code: 2 npm ERR! gyp ERR! stack at ChildProcess.onExit (/builds/ldath-core/examples/ex-material-dashboard/node_modules/node-gyp/lib/build.js:262:23) npm ERR! gyp ERR! stack at ChildProcess.emit (node:events:390:28) npm ERR! gyp ERR! stack at Process.ChildProcess._handle.onexit (node:internal/child_process:290:12) npm ERR! gyp ERR! System Linux 5.4.109+ npm ERR! gyp ERR! command "/usr/local/bin/node" "/builds/ldath-core/examples/ex-material-dashboard/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library=" npm ERR! gyp ERR! cwd /builds/ldath-core/examples/ex-material-dashboard/node_modules/node-sass npm ERR! gyp ERR! node -v v16.13.1 npm ERR! gyp ERR! node-gyp -v v3.8.0 npm ERR! gyp ERR! not ok npm ERR! Build failed with error code: 1 npm ERR! A complete log of this run can be found in: npm ERR! /root/.npm/_logs/2021-12-16T01_47_13_377Z-debug.log

Solution

looks like to old version of node-sass is used by gyp

Additional comments