creativetimofficial / ct-material-dashboard-pro Goto Github PK
View Code? Open in Web Editor NEWMaterial Dashboard Pro - Premium Bootstrap 5 Admin
Home Page: https://demos.creative-tim.com/material-dashboard-pro/pages/dashboards/analytics
Material Dashboard Pro - Premium Bootstrap 5 Admin
Home Page: https://demos.creative-tim.com/material-dashboard-pro/pages/dashboards/analytics
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.
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,
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!
Is there any to fix to navbar to top?
thanks :)
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:
First you must compile you Scss with Koala.
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
.
Any of the javascript features of Material Dashboard Pro doesn't work in a React Web App, checkbox, radios, tooltips, charts.
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.
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
.
Regards,
Dragos
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
It looks like the "Timeline" page (http://demos.creative-tim.com/material-dashboard-pro/examples/pages/timeline.html) is not responsive.
This bug you can find here.
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.
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.
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>
How can I port in a working version of the calendar in the demo?
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
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
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">
I have used data-toggle="tooltip" data-placement="bottom" title="Tooltip on top"
, but showing toolyip without any styling.
Am I missing anything?
How to keep left side nav menu default open.
I set aria-expanded="true"
to <a>
and <div>
, but it's not work.
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, 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?
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.
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,
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
Do you have a radio and checkbox validation workaround? It seems that those type of fields are not covered on the theme documentation.
Thanks!
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.
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.
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:
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
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:
Hope this will help you. Let us know if you have any other issues.
Best,
Alex
Currently its a dd/mm/yyyy and i want to chnage it to yyyy-mm-dd
Could you please asssit?
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
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');
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 ...
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!
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
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.
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 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"
How can I migrate to bootstrap4 or do you have any plans to release Material Dashboard Pro with bootstrap4?
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 :(
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.
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.
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: 233
and replace the total_steps = $wizard.find('li').length;
with total_steps = $wizard.find('.wizard-navigation li').length;
. Hope that helps you!
Best,
Dragos
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.