There is a CSS version to use when printing ? Sometimes I need a black/white print version of a form and its complete useless what I get from the current CSS. This is the only reason I don't using the template for anything after the purchase.

Hi! For fixing the issue with the scroll on IE 11 you must take the uploaded scss partial _select-bootstrap.scss and replace in assets/scss/material-dashboard/plugins/_select-bootstrap.scss with the new file. Compile you're scss with Koala and please make sure that you're output path is assets/css/material-dashboard.css.

_select-bootstrap.scss.zip

Regards,
Dragos

Hi

I have a form with several fields and I want to use selectpicker with data-style="select-with-transition". Unfortunately this field is not aligned with the others. In the example below, the second field appears a few pix above the previous field. Any suggestion to fix this?

                                    <div class="col-sm-3">
                                        <div class="form-group label-floating">
                                            <label class="control-label">Zipcode</label>
                                            <input type="Zipcode" class="form-control" number="true" minlength="5" maxlength="5" required>
                                        </div>
                                    </div>

                                    <div class="col-sm-3">
                                        <select class="selectpicker" data-style="select-with-transition" title="State" data-size="7">
                                            <option disabled> Choose state</option>
                                            <option value="2">Florida </option>
                                            <option value="3">California</option>
                                            <option value="4">Massachusetts</option>
                                        </select>
                                    </div>

Thank you for using our products. We highly recommend you not to mix the products because there can be some compatibility issues on the classes. This is a temporary situation, we are working to fix this. Till then here is an overview about how to use the products in your project:

1. The Dashboard should be used for the Admin/CMS part of your website/startup. Here is where you control everything from the management part, where you see stats like this about your products/users, where you edit/add/delete different items, etc. This is the control panel of your site. The Dashboard also includes the Login Page, Register Page or Lock Screen Page so you can use them to have the access to the Dashboard

2. The UI Kit should be used for the part where you present your business. You can create with the kit the Landing Page of your startup/website, the Contact Us Page the Pricing Page the About Us Page etc. Or you can use this to create also your Blog, where you will keep in touch with your audience. You can also built your own pages with already made sections -> Sections

If you create a SaaS, probably your users will have access to the Dashboard too, so they can control some items from there too. But you still need the UI kit for the presentation pages of your business. In this way, you will have the same design in the presentation and also in the Dashboard.

The basic idea is that you should keep the products separate and not try to combine them because you will load your page with too much CSS and Javascript which are not necessary in the same time. Your user will be either on a Landing Page or on the Admin Part.

If you like for example 1 item from one product, like a Card, and it is not in the other product, you can check in the next example how to do that using the SCSS files.

Just follow the next steps, for the FileUpload Example:

1. You can go to material-kit/assets/sass/material-kit/_fileupload.scss and put it in the same folder structure to material-dashboard.
2. Compile again the assets/sass/material-dashboard.scss SASS using Koala http://koala-app.com/ (make sure you set the output path to assets/css/material-kit.css).
3. Move the library for the file upload from material-kit/assets/js/jasny-bootstrap.min.js to the same folder in material-dashboard and then everything should work fine in the Dashboard.

Hope this will help you. Let us know if you have any other issues.

Best,
Alex

Hi, I'm using Firefox 50.0 on Mac OS 10.11 and this shadow is not correctly aligned. Although in Chrome and Safari works correctly.

If I modify top property of .checkbox .checkbox-material::before and set it to -5px it work on all browsers. But I want to know if you can check and correct this on the original files.

Thanks

When there are several items in menu, minibar visualization crashes after the viewport.

I´ve tried all solutions in https://github.com/creativetimofficial/material-dashboard-pro/issues/2, but none of those works the right way, because I need all menu items visible.

On the other hand, the footer should be localized at the end of the length of minibar when it exceeds the viewport, but it doesn't.

Thanks.

CSS styles are broken when a newer version (v1.10.15) of DataTables.net is used.

Hi, i have just purchased this beautiful template. But there is some query regarding sweet alert.

How to call sweet alert from code behind via c# asp.net.

Hey!

So it seems that you cant put your finger on a chart and scroll up/down/left/right. Some of my charts are fairly tall and the user is left with just a few pixels to scroll on. You can replicate this on any of the charts in the demo files btw, either on an actual phone or in dev tools device-view.

It seems that the guys over at Chartists have figured it out, as I don't have this issue on their Examples page, yet I can't find a single issue on their Github regarding this which makes me think we're doing something wrong?

If not then I'll probably open a issue there as well, but I thought I would start here as this is something you also should be aware of. If we cant resolve the issue, this pretty much means I cant use any charts of this kind in my app :(

Hi, am trying to implement a 'Scroll to Top' function as seen here:

https://codepen.io/rdallaire/pen/apoyx

Works fine in plain HTML, but the minute I include Material Dashboard Pro, the scroll event doesn't ever seem to trigger. That's even with disabling Perfect Scrollbar and testing on Android etc.

Any ideas?

i develop web application with Material Dashboard Pro template and angularjs framework. i have problem with text input tag on modal when adding ng-model to it , it becomes infocused when pressed one key, i need help.

Hi,

I have checkboxes in an Angular template file and loaded dynamically, but the checkboxes are not rendered. Is there a function I need to call to have material checkboxes?

Thank you!

Hi,

Just purchased and love it so far, but how can I modify the sidebar to look like the sidebar of Light Bootstrap Dashboard Pro, I like the red sidebar color of Light Bootstrap Dashboard Pro

Tks!

Hi,

I just boat this nice theme and I really like your work. Thank you.

I just have a question on custom colors...
In _variables.scss I changed:

$brand-primary: $blue-grey !default;

With this now, in my side bar, when I put the data-active-color to purple I have my primary color.

<div class="sidebar" 
          data-active-color="purple" 
          data-background-color="white" 
          data-image="./img/sidebar-4.jpg">

It's a bit weird to put purple to have the brand color, but it's fine.

BUT, when I put in a card purple it's going purple and not brand

<div class="card">
            <div class="card-header card-header-icon" data-background-color="purple">
                <i class="material-icons">language</i>
            </div>
            <div class="card-content">
                <h4 class="card-title">Location</h4>

How can I set the brand color to my card?
Thank you

How do I check which radio button is checked?I have tried

$(document).ready(function() {
if ($("#InvoiceYes").attr('checked')) {
alert("invoice yes");
$("#taxSection").fadeIn(400);
}
else{
$("#taxSection").fadeOut(100);
}
});

But this is not working..data-attribute checked=true doesn't add dynamically.pls give me a jquery solution to check which radio button is selected.

Hi,

I have created a custom stylesheet style.css and placed it in the root.
Unless I add !important, existing styles are not able to change.

I don't want to change the master CSS files material-dashboard & bootstrap.min

Scroll bar is visible on http://demos.creative-tim.com/material-dashboard-pro/examples/pages/login.html in Chrome and Firefox, on all resolutions, although it's definitely not needed.

When clicking on a date before or after the current selected month (greyed days), the datetime picker should return the right month along the day number. It's the way jquery and other datetime pickers works.
Thanks in advance !
PS/ see screen capture below ...

Here in the bottom I will attach the modified partial _sidebar-and-main-panel.scss for having background-color red on sidebar. You must overwrite this file with the partial located in assets/_scss/material-dashboard/_sidebar-and-main-panel.scss, and if you have modified something in your file you must merge the old file with the new one. After you overwrite you must follow the next steps:

1. First you must compile you Scss with Koala.

2. Second to change your color you must open the html page that you want from examples folder, then find the attribute data-background-color and data-active-color from the div with class .sidebar and just change the value of this attribute with "red" and also change the value of data-active-color with white.

_sidebar-and-main-panel.scss.zip

I have used data-toggle="tooltip" data-placement="bottom" title="Tooltip on top", but showing toolyip without any styling.
Am I missing anything?

Any of the javascript features of Material Dashboard Pro doesn't work in a React Web App, checkbox, radios, tooltips, charts.

Hello Creative Tim,

Thank you for your awesome product, I'm working with my friend Akram to setup the template on an ASP.NET Core Project, and I want your support or guidance on the following issues:

1- The navigation menu on the Sidebar on the left keeps on closing when navigating from page to page, I want the menu to be kept open highlighting the current page. Please advice on how to resolve this issue, or show me what is the property or show me documentation regarding the navigation menu to be able to keep it opened from page to page, it works fine as expected when I view the template from a browser before applying any template engine to the HTML markup.

2- I'm using Razor Templating engine, I want to display the title of the current page next to the button the minimizes the nav bar, the thing is that I want to separate the title from the the rest of the Markup that is found on every page, which is in the Layout (Master Page) and I want to be able to set the title on every page, meaning that I don't want to include the same markup on every page in order to set this title.

3- If i'm building the table dynamically using JQuery and Ajax, any css classes doesn't get applied, Like tooltips, or checkbox classes.

Please reply with documentation or walk me through resolving these issues.

Thank you.

I have just purchased material-dashboard-pro, currently when window size < 991 the sidebar will hide to right, is it possible to set it to left?

thanks

How can I port in a working version of the calendar in the demo?

How to keep left side nav menu default open.

I set aria-expanded="true" to <a> and <div>, but it's not work.

Hi! Just a quick little thing - in /documentation/tutorial-components.html#cards-row, in the second example

<div class="card" data-background-color="red">>
  <div class="card-header">

should be

<div class="card">
  <div class="card-header" data-background-color="red">

Hey guys,

Getting this issue on the mini sidebar:

This is the regular sidebar:

Looks like when the contents do not fill up the whole screen, the mini-sidebar doesn't resize properly.

Problem exists on Android, iOS, and Chrome on Windows PC, not tested further. One way to reproduce this is to render a screen that has charts (i.e., dashboard, charts) in landscape orientation on tablet then switch to portrait, then back to landscape. Charts will be truncated on the right. This is actually my use case, mobile tablet.
You can also duplicate this using chrome on windows PC either by dragging to size or in developer rendering tools.

Screen shots are from Chrome.

This bug you can find here.

When scrolling down some elements on page content are scrolling up and others remain fixed and after some amount of scrolling they fade out.

Other pages in forms are working as supposed to.

Noticed this behavior on chrome Version 53.0.2785.116 (64-bit) on linux mint.

How can I migrate to bootstrap4 or do you have any plans to release Material Dashboard Pro with bootstrap4?

GET https://csi.gstatic.com/csi?v=2&s=mapsapi3&v3v=27.12&action=apiboot2&e=10_1_0,10_2_0&rt=main.5 net::ERR_BLOCKED_BY_CLIENT

Is this something that would go away with a purchase?

Thanks,
Dexter

Following instructions in https://github.com/creativetimofficial/material-dashboard-pro/issues/15, remains a visualization problem when I´m activating sidebar mini, the navbar width doesn´t resizes.

Thanks in advance.

Issue identified by Shawn:

To fix that please go to line 1444 in material-dashboard.css v1.1.0 where is this class: table > thead > tr > th and remove the code: width: 60px !important;

Best,
Alex

From time to time I have to pre-load certain input fields in a form using code. I would like floating labels to behave the same as they do when entering data from keyboard. How can I accomplish this?

Here I have inserted the user id and password using code and labels remain in default position. Company was entered from keyboard and gives desired result.

Is there any to fix to navbar to top?

thanks :)

It looks like the "Timeline" page (http://demos.creative-tim.com/material-dashboard-pro/examples/pages/timeline.html) is not responsive.

Hi! I checked the issue with selectpicker that breaks the .nav-pills from the top of the wizard and I fixed it. What you must do is to go in assets/js/demo.js on the line: 233and replace the total_steps = $wizard.find('li').length; with total_steps = $wizard.find('.wizard-navigation li').length;. Hope that helps you!

Best,
Dragos

Hello, After adding material-dashboard.sass to Koala and trying to compile it I am getting an error without any description. Any idea? I have no experience in front-end development. Thank you

Hi @alexandru-paduraru

Do you have a radio and checkbox validation workaround? It seems that those type of fields are not covered on the theme documentation.

Thanks!

Hi Axel

I have a form that I populate with information from a DB, using JS/Ajax. When I change the value of the input field, the label remains in the "empty position" and shows on top of the information in the field. See below the image. Also below is the HTML and JS code.

Thanks for your help, as usual.

Eric
[HTML]

[JS]
document.getElementById("user_firstname").value = "something"

I have downloaded FA icons into local folders; icons are not showing in Firefox,
All that I can see is a box.
If i use the CDN URL; icons are showing.

I have followed the similar issue reported at Font-awesome; but couldn't resolve.
FortAwesome/Font-Awesome#10726

Hi Axelut, Where do I find information on the sliders that are in Material Dashboard Pro? I could not find any details/examples to set up the slider (e.g. horizontal/vertical, setting a step, showing values, etc). Thanks for your help.

Currently its a dd/mm/yyyy and i want to chnage it to yyyy-mm-dd
Could you please asssit?

An input that is invalid should show to the user what is the error and what the user did wrong so he can write the correct information.

I need to dynamically create a list of items, each with a checkbox (I also store some data in the list for later processing). The following code works if I remove class="checkbox" from the initial div. It works if I embed the output as static html. If I run the code I don't get the checkbox but I do get the text. Can you tell me where I'm going wrong? Thanks.

            $('#equipmentList').append(
                '<div class="checkbox">' +
                    '<label>' +
                        '<input type="checkbox" name="equipmentCheckboxes" checked' +
                        ' data-equipment_id=' + equipmentName +
                        ' data-equipment_disposition=' + equipmentDisposition +
                        ' data-timestamp=' + timestamp +
                        '>' +
                        equipmentName + ' - ' + equipmentDisposition + ' - ' + equipmentTime +
                    '</label>' +
                '</div>');
            $('#equipmentList').trigger('create');

Hi,
there seems to be a problem with the positioning of the highlight, when you click a checkbox. The highlight is off centered. You can reproduce it on your demo page:
http://demos.creative-tim.com/material-dashboard-pro/examples/forms/regular.html

I'm pretty sure it's because of the recent Firefox update, because it worked few days ago. In Chrome everything is fine.

Hi,

The floating labels only "float" when you type text.

If you start with a value in the field - they are not floated correctly:

How can we make them "float" if there is already a value there?

The problem is visible in this template but in other material ones as well. Focused textareas don't have the bottom border coloured like other input fields. For instance, users page All input fields get a border-bottom on :focus, textarea doesn't.

At this moment there is an issue with the Bootstrap Wizard on mobile, the "moving-tab" is not getting the right size. To fix it, please go to assets/js/demo.js around line 77 replace the whole function initMaterialWizard: function() {...} with this one:

initMaterialWizard: function(){
        // Code for the Validator
        var $validator = $('.wizard-card form').validate({
    		  rules: {
    		    firstname: {
    		      required: true,
    		      minlength: 3
    		    },
    		    lastname: {
    		      required: true,
    		      minlength: 3
    		    },
    		    email: {
    		      required: true,
    		      minlength: 3,
    		    }
            },

            errorPlacement: function(error, element) {
                $(element).parent('div').addClass('has-error');
             }
    	});

        // Wizard Initialization
        $('.wizard-card').bootstrapWizard({
            'tabClass': 'nav nav-pills',
            'nextSelector': '.btn-next',
            'previousSelector': '.btn-previous',

            onNext: function(tab, navigation, index) {
            	var $valid = $('.wizard-card form').valid();
            	if(!$valid) {
            		$validator.focusInvalid();
            		return false;
            	}
            },

            onInit : function(tab, navigation, index){
                //check number of tabs and fill the entire row
                var $total = navigation.find('li').length;
                var $wizard = navigation.closest('.wizard-card');

                $first_li = navigation.find('li:first-child a').html();
                $moving_div = $('<div class="moving-tab">' + $first_li + '</div>');
                $('.wizard-card .wizard-navigation').append($moving_div);

                refreshAnimation($wizard, index);

                $('.moving-tab').css('transition','transform 0s');
           },

            onTabClick : function(tab, navigation, index){
                var $valid = $('.wizard-card form').valid();

                if(!$valid){
                    return false;
                } else{
                    return true;
                }
            },

            onTabShow: function(tab, navigation, index) {
                var $total = navigation.find('li').length;
                var $current = index+1;

                var $wizard = navigation.closest('.wizard-card');

                // If it's the last tab then hide the last button and show the finish instead
                if($current >= $total) {
                    $($wizard).find('.btn-next').hide();
                    $($wizard).find('.btn-finish').show();
                } else {
                    $($wizard).find('.btn-next').show();
                    $($wizard).find('.btn-finish').hide();
                }

                button_text = navigation.find('li:nth-child(' + $current + ') a').html();

                setTimeout(function(){
                    $('.moving-tab').text(button_text);
                }, 150);

                var checkbox = $('.footer-checkbox');

                if( !index == 0 ){
                    $(checkbox).css({
                        'opacity':'0',
                        'visibility':'hidden',
                        'position':'absolute'
                    });
                } else {
                    $(checkbox).css({
                        'opacity':'1',
                        'visibility':'visible'
                    });
                }

                refreshAnimation($wizard, index);
            }
      	});


        // Prepare the preview for profile picture
        $("#wizard-picture").change(function(){
            readURL(this);
        });

        $('[data-toggle="wizard-radio"]').click(function(){
            wizard = $(this).closest('.wizard-card');
            wizard.find('[data-toggle="wizard-radio"]').removeClass('active');
            $(this).addClass('active');
            $(wizard).find('[type="radio"]').removeAttr('checked');
            $(this).find('[type="radio"]').attr('checked','true');
        });

        $('[data-toggle="wizard-checkbox"]').click(function(){
            if( $(this).hasClass('active')){
                $(this).removeClass('active');
                $(this).find('[type="checkbox"]').removeAttr('checked');
            } else {
                $(this).addClass('active');
                $(this).find('[type="checkbox"]').attr('checked','true');
            }
        });

        $('.set-full-height').css('height', 'auto');

         //Function to show image before upload

        function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    $('#wizardPicturePreview').attr('src', e.target.result).fadeIn('slow');
                }
                reader.readAsDataURL(input.files[0]);
            }
        }

        $(window).resize(function(){
            $('.wizard-card').each(function(){
                $wizard = $(this);

                index = $wizard.bootstrapWizard('currentIndex');
                refreshAnimation($wizard, index);

                $('.moving-tab').css({
                    'transition': 'transform 0s'
                });
            });
        });

        function refreshAnimation($wizard, index){
            $total = $wizard.find('.nav li').length;
            $li_width = 100/$total;

            total_steps = $wizard.find('.nav li').length;
            move_distance = $wizard.width() / total_steps;
            index_temp = index;
            vertical_level = 0;

            mobile_device = $(document).width() < 600 && $total > 3;

            if(mobile_device){
                move_distance = $wizard.width() / 2;
                index_temp = index % 2;
                $li_width = 50;
            }

            $wizard.find('.nav li').css('width',$li_width + '%');

            step_width = move_distance;
            move_distance = move_distance * index_temp;

            $current = index + 1;

            if($current == 1 || (mobile_device == true && (index % 2 == 0) )){
                move_distance -= 8;
            } else if($current == total_steps || (mobile_device == true && (index % 2 == 1))){
                move_distance += 8;
            }

            if(mobile_device){
                vertical_level = parseInt(index / 2);
                vertical_level = vertical_level * 38;
            }

            $wizard.find('.moving-tab').css('width', step_width);
            $('.moving-tab').css({
                'transform':'translate3d(' + move_distance + 'px, ' + vertical_level +  'px, 0)',
                'transition': 'all 0.5s cubic-bezier(0.29, 1.42, 0.79, 1)'

            });
        }
    },

Then everything will work fine.

Best,
Alex