I add @font-face into material-dashboard-react.css but after compiling my urls changed to sth else what should i do?

Unable to use bootstrap modal. Modal opens but not active.

Quite strange the anguarjs code does not work with webpack

input type file ui doesn't really help/suggest whether we have to select file or enter text.

Wouldn't it be better to offer something like dropzone or traditional file input style.

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

First of all I would like to congratulate you on your great work. Secondly, I apologize for my English.

I'm having problems with the css style of my select inputs, where sometimes it's applied to the component and some not.

Below are two images where it shows exactly what is occurring.

Could someone help me in this case?

PS. All scripts are being loaded by the application.
PS². I'm using AngularJS v.1.6.1.

Hey,

I don't know if it's intended or not, but your kit is missing the _pagination.scss partial. I copied the one from Material Kit, works fine. It's helpful to have pagination in this dashboard, for example for user tables ect.

Cheers.

When I'm trying to print the dashboard page, only a part of the page is available for print. I'm guessing that this has something to do with scrolling. Also the animated charts do not show markings in the charts while printing. Any solutions to print the other charts would be helpful.

Resolution set to A4:

Resolution set to Tabloid:

styling break label doesnt animate after html is loaded from a template using AngularJS UI-Router.

See images below.
Tested on different iOS devices (iPad 4, iPhone 5s, iPhone 6) and different browsers (Google Chrome-based).

I tried creating a floating action button as is conventional in material design but fixed positioning doesn't not work. The button scrolls along with the rest of the page instead of maintaining a position at the bottom right corner of the screen. When I take off the material-dashboard css file, it works. Here's my code:

<a class="btn-floating><i class="material-icons">add</i></a>

css:

a.btn-floating{
     position:fixed !important;
     right:20px;
     bottom:20px;
     padding:0;
     margin:0;
     z-index: 1;
}

PS: Awesome library you have here, Great work!

1.First you must to go on html page and add to body tag the class menu-on-left.

2.Second go to assets/sass/md/_responsive.scss and add the following lines of code:

@media (max-width: 991px){
     .menu-on-left{
        &.nav-open{
            .main-panel,
            .wrapper-full-page,
            .navbar-fixed > div{
                @include transform-translate-x(260px);
            }

            .sidebar,
            .off-canvas-sidebar{
                @include transform-translate-x(0px);
            }
        }

        .sidebar,
        .off-canvas-sidebar{
            left: 0;
            right: auto;
            @include transform-translate-x(-260px);
        }
    }
}

3. Compile your scss with Koala assets/scss/paper-dashboard.scss.

4. Go to assets/js/material-dashboard.js and add the following code on line 84 and line 97, then go to the following lines: 197, 221 and 233. You have to replace $('html') with $('body'):

line 84: if( $(window).width() <= 991 && $('body').hasClass('menu-on-left') ){
        $('.main-panel').css('position','fixed');
    }

line 97: if( $(window).width() <= 991 && $('body').hasClass('menu-on-left') ){
        $('.main-panel').css('position','fixed');
    } else {
        $('.main-panel').css('position','');
    }

I detected this code, which prevents correct printing of long tables, texts or whatever

.main-panel {
  max-height: 100%;
  height: 100%;
}

I really don't know exactly if it's really needed but removing it allowed for printing multipage documents on Chrome.

BTW I just removed it and it still seems to render correctly.

Hello;
your dashboard realy good. But I can add class="active" wit jquery. masterpage (aspx). how can add class active?

So I've added a new color swatch to _color.scss ($newcolors) that has all the color-ways of existing swatch (e.g. $newcolors-50 to -A700 and $newcolors: $newcolors-500 !default;). I then changed _variables.scss to $brand-primary: $newcolors !default; but now I don't get the background color for the active item in the sidebar - what am I missing?

Edit: I also changed data-color="newcolors" in the sidebar div.

Cheers,
Simon

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 there!

I'm having a bit of an issue with a text input inside of an a tag. When hovering over the element, the inputted text in the field disappears, however it's still there as the corresponding ajax request will fire on the "Go!" button click. I've tried adjusting the z-index of the input field, but that didn't work. Any help would be greatly appreciated, thank you in advance!!

Attached are example images showing what I'm speaking of:

Hello CreativeTim! First I want to thank you for this amazing dashboard.

I'm having problems with the search field and some menu items when using mobile screens.
I'm using this Dashboard as the UI for an Electron App, and I gave an ID to the search field. When the page loads, I'm using a JQuery Mask plugin to mask the field and I'm preventing the submit event and instead calling a function.

Here's the code:

Everything seems to run well when I load my app in desktop view, but when it changes to mobile view, something seems to break. The mask doesn't let the user input anything different from 3 letters and 4 numbers (SSS0000). It seems that after any changes are made to the form, my code doesn't recognizes the element by its ID.

I hope the following video can clarify the issue I'm running into:

In the video I inspected the element just to show that the ID is there and towards the end, when I hit enter/submit my code doesn't recognizes the event anymore so it reacts as a default submit.

I'm sorry I'm no Javascript master, this may be a simple issue but could anyone help me?

Thank you very much, love you guys!

Hi! I added some icons in the nabvar but when i try to enter doesn't work. Here's the code:
<ul class="nav navbar-nav navbar-right"> <li> <a href="settings" class="dropdown-toggle" data-toggle="dropdown"> <i class="material-icons">person</i> <p class="hidden-lg hidden-md">Settings</p> </a> </li> <li> <a href="logout.php" class="dropdown-toggle" data-toggle="dropdown"> <i class="fa fa-sign-out"></i> <p class="hidden-lg hidden-md">Log out</p> <hr></hr> </a> </li> </ul>

Hi,
I'm using material-dashboard but I have troubles using modals. I'm using a standard code which works properly without the material-dashboard.css:

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <!--Content-->
        <div class="modal-content">
            <!--Header-->
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title w-100" id="myModalLabel">Modal title</h4>
            </div>
            <!--Body-->
            <div class="modal-body">
                ...
            </div>
            <!--Footer-->
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
        <!--/.Content-->
    </div>
</div>

But as soon as the material-dashboard.css is loaded, I can't dismiss the modal window either on clicking on close button or on the cross icon. Buttons are not available.
Could you please help?
Thanks

Giving the base version a look through before I purchase pro, I noticed that the responsive.scss file contains a keyframe definition for fadeIn which is located inside a media query. IE 10-11 won't respect it and the animation will never work, and having it inside the media query causes errors in csslint and when trying to minify the file. Moving the keyframe definitions outside the media query fixes both issues.

Also odd, this one animation is defined in responsive.scss, while all of the others are in animate.scss including the reciprocal fadeInDown, is this intentional?

Hi,

Thanks for the lovely HTML template.

How can I add sub-menu in sidebar nav?

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.

Are there plans for Bootstrap 4 support?

While browsing the Dashboard page at http://demos.creative-tim.com/material-dashboard-pro/examples/dashboard.html and hovering over a Card with a chartist-js/ct, the card falls off and leaves a message "FIX HEADER". The chartist was removed from all three cards and the error was still repeatable. Then data-header-animation was set to false and again, the Cards fell off.

There are 2 short video's attached to demonstrate the error.
(https://github.com/creativetimofficial/material-dashboard/files/1290273/MaterialCardFallsOff.zip)

This MaterialCardHTML.txt has the HTML with the class fix-broken-card.

This has to be the best error message I've seen.

First of all, what an amazing job you are doing on this project.

I want to know if it's possible to add a text floating inside an input, with something like "@gmail.com". It's hard to explain, but it is something like this.

Sorry if this isn't really an issue.

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;
}
<!doctype html>

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

isn't there any way to have fixed nav bar at top

This element has a height of: min-height: calc(100vh - 123px);. This is too big and results in vertical scrollbars when there is little content on the page.

Where does this 123px come from? Imho it should be something like 152px to prevent the scrollbar.

I opened Modal and I can't scroll it.
Any help would be great

Hi! I will attach here a video about how to compile the sass after you download the product. It was a little problem which we will be fixed in the next update, so please see this link. Hope this will help you!

Regards,
Dragos

Hello,

I have tried to recompile CSS with color red.

I have updated sass/md/_variables at line 28 to $brand-primary: $red !default;

Then corrected paths in material-dashboard.scss because downloaded package has path sass/md/_* instead of _scss/md/*.

But Koala says:
"Error: Invalid CSS after \".../md/_variables\"\": expected \"{\", was \";\"\A on line 23 of E:\Kamu\WEBy\themes\material-dashboard-v1.2.0\assets\sass\material-dashboard.scss\A \A 18: \A 19: */\A 20: \A 21: \A 22: //variables and mixins\A 23: @import \"../sass/md/_variables\";\A 24: @import \"../sass/md/_mixins\";\A 25: @import \"../sass/md/_shadows\";\A 26: \A 27: //plugin css\A 28: @import \"../sass/md/plugins/_plugin-nouislider\";"; }

Can you please advise what I am doing wrong?

Thank you,
Cheers, Reddy

Original and updated scss files:
sass.scss.zip

Hello,

Input type as file not working in this dashboard.Any idea about how to use input type as file.

Hello!
I tried to reproduce the navigation sidebar in the dashboard example (material-dashboard/examples/dashboard.html). But my sidebar doesn't work as expected. It does not toggle the active class for 'li' items.
I apply following CSS and JS:

  <link href="/Content/bootstrap.css" rel="stylesheet"/>
  <link href="/Content/material-dashboard.css" rel="stylesheet"/>
   <script src="/Scripts/jquery-3.1.1.js"></script>
   <script src="/Scripts/bootstrap.min.js"></script>
  <script src="/Scripts/respond.js"></script>
   <script src="/Scripts/material.min.js"></script>
  <script src="/Scripts/chartist.min.js"></script>
  <script src="/Scripts/bootstrap-notify.js"></script>
  <script src="/Scripts/material-dashboard.js"></script>
   <script src="/Scripts/modernizr-2.6.2.js"></script>    
   <link href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">
   <!--Icons, list is here: http://materializecss.com/icons.html -->
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

This is the sidebar:

<div class="sidebar" data-color="dark-blue">
    <div class="logo">
        <div class="simple-text">
            <!-- Brand Title-->
        </div>
    </div>
    <div class="sidebar-wrapper">
        <ul class="nav">
            <li>
                <a href="/">
                    <i class="material-icons">dashboard</i>
                    <p>Home page</p>
                </a>

            </li>
            <li>
                <a href="/FirstPage">
                    <i class="material-icons">content_paste</i>
                    <p>FirstPage</p>
                </a>
            </li>
            <li>
                <a href="/SecondPage">
                    <i class="material-icons">person</i>
                    <p>SecondPage</p>
                </a>
            </li>
        </ul>
    </div>
</div>
<div class="container body-content">...</div></body></html>

Please, tell me, what I am doing wrong.

Hello where can i find a sketch UI kit with components nested symbols etc
for this Material Dashboard ?

Thanks for your time
Michail

Using Bootstrap 3

I have included the required files and maintained the file structure. However, Column Offset classes are not supported.

I also, checked on:
https://github.com/FezVrasta/bootstrap-material-design

The offset works when I just use the material kit files.

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.

I've tried adding this to my css
.datepicker {
z-index: 1151 !important;
}

and it didn't help. Any idea why this isn't working?

There are many examples of gracefully responsive tables that scale to mobile, is there any plan to implement these or no? Or, is this a feature we can get on pro?

The sidebar color filter is a nice function. Is it possible to extend the function to change the primary color of the whole page? It doesn't make sense to change only the primary color of the sidebar.

I am using material dashboard in one of my project and have around 16 cards so need more back ground colors kindly help me .

As of now only have data-background-color=" purple | blue | green | orange | red "

Using tabs to display a graph, I have 2 manufacturing plants and am trying to show a chart for each plant, The first tab shows All data, the second and third are plant specific. By all data I mean a chart that has cumulative data not show 3 charts.

On page load the default tab shows all three charts. If I click on another tab it shows only the specific chart(the correct way)
Correct sshot

Problem SShot

Dear Team!
In my ASP.NET MVC5 web app, I would like to use checkbox, but it generated twice.

This is my cshtml code:

<div class="checkbox">
     <label class="control-label">
          @Html.CheckBoxFor(model => model.IsPrivate)  @Html.LabelFor(model => model.IsPrivate, 
              htmlAttributes: new { @class = "control-label" })
     </label>
 </div> 

and the result is:

<div class="checkbox">
    <label class="control-label">
        <input data-val="true" data-val-required="A következő mező megadása kötelező: Saját feladat." id="IsPrivate" name="IsPrivate" type="checkbox" value="true"><span class="checkbox-material"><span class="check"></span></span>
        <input name="IsPrivate" type="hidden" value="false">  
        <label class="control-label" for="IsPrivate">Saját feladat</label>
   </label>
</div>

What do I do wrong?
If I post the form, it will be sent twice to server.
First value is true, second value is false. Why?

Regards,
darkhck

i want to use 18n internationalization in the pro template and also i think to localize the sidebar with a manner
is there any solution or opinion about?

thanks!

It doesnt seem to include pagination can i include Tim material kit to have that or will it cause classes to be loaded twice? I am asking actually why wasn't Tim material kit loaded separately ?