I'm having a hard time getting the <select> elements integrated into reactive form. The dynamic classes (ng-valid, ng-touched, etc) aren't working properly.

<div [class.has-success]="quoteRequestForm.get('services').touched"
     [class.has-error]="quoteRequestForm.get('services').touched && quoteRequestForm.get('services').hasError('required')"
     class="form-group label-floating form-warning">
     <label for="services" class="control-label">Services</label>
     <select multiple id="services" formControlName="services" class="select form-control">
          <option value="Cat Sitting">Cat Sitting</option>
          <option value="Dog Walking">Dog Walking</option>
          <option value="Dog Daycare">Dog Daycare</option>
          <option value="Dog Boarding">Dog Boarding</option>
          <option value="Overnight Care">Overnight Care</option>
     </select>
</div>

But the classes on the select element don't change dynamically based on user input.

Am I missing something?

jquery.min.js:2 Uncaught TypeError: $(...).tagsinput is not a function
at HTMLDocument. (material-kit.js:49)
at j (jquery.min.js:2)
at k (jquery.min.js:2)
(anonymous) @ material-kit.js:49
j @ jquery.min.js:2
k @ jquery.min.js:2

Is there documentation on how to customize the google map in the 'Contact Us 2' component so that it shows a location other than Bucharest?

Running gulp-sass-lint gives an error in _inputs-size.scss. It looks like it doesn't like the following selector:

select[multiple]#{$parent}

in :

@mixin input-size($parent, $mdb-input-height, $padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius){

#{$parent} {
height: $mdb-input-height;
padding: $padding-vertical $padding-horizontal;
font-size: $font-size;
line-height: $line-height;
border-radius: $border-radius;
}

select#{$parent} {
height: $mdb-input-height;
line-height: $mdb-input-height;
}

textarea#{$parent},
select[multiple]#{$parent} {
height: auto;
}
}

By the way the SASS linter produces a lot of warnings for the material kit pro. Is it possible to fix them ?

I have bought the package nut do not know how to install it in a meteor project. please help

When the floating label on an input is used as per your example, and the control is initialized with a value, then the label should automatically float above it. Right now it overlaps the text until you click inside it.

I am having trouble trying to make the select work in Meteor. I'm using Blaze for templates.
There are no other css/jss than yours in the project.

This is what I get when using the code in the example at foms/extendended.html:
Any advice would be apreciated.

As you can see there are some styles lacking and the transition isn't the same neither.

Thanks in advance for any help.

My mobile menu is not opening up when clicked on.

in IE 11 on Windows 10, when you rotate a card all of the text/content from the front is shown and is flipped from right to left. You do not see the contents of the back. This issue is present in the material-kit-pro download as well as in my own site I was trying to use it on.

�'�'�'�'�'� I have got something like this, when I try to insert "āčēšī" characters.

Hi there, have been using the Material Kit Pro for a while and just realized that there is problem on the Google Map. I am a student and new to JavaScript, hope that I can get some help on this. Thanks.

Currently the mobile navigation stays over the page content after selecting a link on it. The user needs to press another time to close the mobile menu, this is not very intuitive. Can you fix this in the code base please?

Just bought the UI kit and have been running some tests with it for a few days. I've found 3 bugs so far (2 of which have already been reported).

If you have a collapsible navbar and cards on the page, when the navbar opens it displays under the cards. Changing the z-index of the card fixes this issue, however this makes the links and buttons on the card un-clickable.

I have an observation here.

with regard to the hamburger and other responsive utilities

In bootstrap - 768 (or larger) is treated as the tablet size
767 or lower is phone

see bootstrap responsive utilities

this means that an iPad is tablet for portrait and landscape

in materialkit, 768 is considered mobile
this means that

1. an iPad can be both mobile and non-mobile (depending on orientation)
2. there are odd inconsistencies when you try to run things using the bootstrap breakpoints

For the Pro version, are there tabs?

Hi! If you want to have the default navbar collapse from Bootstrap you must follow the following steps:

1. You must go in you're html page and put inside of tag nav on tag button the attribute data-target="#navbar-collapse", then you go on <div class="navbar-collapse"></div> and add to this the id="navbar-collapse".

2. Now you have to take the uploaded file _responsive.scss and replace in assets/sass/material-kit/_responsive.scss with the new one.
   _responsive.scss.zip

3. Again you have to take the uploaded javascript file material-kit.js and replace in assets/js/material-kit.js with the new one.
   material-kit.js.zip

4. In the final you must compile you're scss with Koala. Please make sure that you're output path is HTML/assets/css/material-kit.css.

To go back on our style of navbar-collapse just put in html page on body tag the class .off-canvas-menu and then you have to remove from div with class .navbar-collapse the id="navbar-collapse", and everything will work fine.

Regards,
Dragos

Perspective Cards v1.1 Shadows looks broken on firefox 54.0.1

Hello,

On ecommerce.html line 225-227 a

is a child of another

. Similar problem on line 255-257.

Thanks.

This also happens on the components page, screenshots are taken from there:
http://demos.creative-tim.com/material-kit-pro/index.html#cards

Hovering a Rotating Card

Image Card

Background Card

Dribble Card

Rotating a Manual Rotating Card:

Perspective Cards:

Before reloading page (clear cache):

After reloading page - I'm hovering the left card:

Oh, by the way, Dynamic Shadows™ work well!

Thank you!

Title basically says it all. Was testing my site compatibility on several devices, and found that the navigation bar does not display correctly on an iPad Mini (width of 768 pixels). The navbar links are gone, indicating that it is not in the "collapsed" state, but the hamburger does not appear.

Notice how in this example image, the navbar (the blue bar at the very top) has no links (there are links, but it is in the "collapsed" state and thus they do not show) but the hamburger to open the menu does not show.

Hi,
I bought the product last week and I found a bug.
When you look at the navbar from an iPad in portrait mode, the navbar nor the burger button shows.
Is there a fix to this?

iPad in horizontal

iPad in portrait

When using a parallax image and scrolling with a mouse wheel or by using the keyboard arrow keys, there's a choppy effect as the image is transformed. Is there anything we can do to smooth this out? It scrolls perfectly in Firefox.

Chrome 59.0.3071.115 64bit (hardware acceleration is turned on)
Mac OS X 10.12.5

Link to video illustrating the issue - https://drive.google.com/file/d/0B0-GC9_5NhWAdDUxUkt2ekRnaDA/view?usp=sharing

I have a problem with rotating cards when used with (masonry + infinitescroll + imagesLoaded), the NEWLY loaded items has the image for the 'front' only, the div with class 'back back-background' is just a gray background, the image is not loaded (however, it loaded if resizing the browser window) :

On page refresh or redirect to another page with id on middle of screen the navbar still transparent.

When an input has no value but contains a placeholder, floating labels don't float on init and input blur, drawing over the placeholder:

When it should always look like this:

Example HTML:

<div class="form-group label-floating">
  <label class="control-label">Phone Number</label>
  <input type="email" class="form-control" placeholder="(123) 456-7890">
</div>

This issue also applies to <select> elements where the selected option's value is empty but the option text is not, suggesting jQuery's val() is being used to determine if there is content in the input area.

For anybody using ES6 and encountering this issue, this snippet works around the issue for inputs but not select's with empty values:

$.material.init()

const placeholderSelector = '.form-group.is-empty input[placeholder]:not([placeholder=""])'
const removeEmpty = (input) => {
  $(input).closest('.form-group.is-empty').removeClass('is-empty')
}

$(placeholderSelector).each((i, input) => removeEmpty(input))
$('body').on('blur', placeholderSelector, (e) => removeEmpty(e.currentTarget))

Hi! On IE 11 we have an issue with navbar-collapse. If you are on responsive mode the all navbar it is not visible. To fix this issue please take the file that I will upload here and just replace the _responsive.scss file with the new one. After that you must compile your scss with Koala. Please make sure that you're output path is HTML/assets/css/material-kit.css.

_responsive.scss.zip

Regards,
Dragos

Hi! If you want to have Off-canvas-menu on Desktop, not only on mobile-tablet you have to follow a few steps:

1. Go in you're html page and add on body tag the class .navbar-burger.

2. Replace in project assets/sass/material-kit/_responsive.scss the uploaded file.
   _responsive.scss.zip

3. Third you must take the uploaded javascript file and then replace in assets/js/material-kit.js with the new one.
   material-kit.js.zip

4. Compile you're scss with Koala. Please be sure that you're output path is assets/css/material-kit.css.

Regards,
Dragos

Hi,

The Material Kit Pro item ( https://www.creative-tim.com/product/material-kit-pro ) does not work with select2. it messed up with design.

Regards,
Rahul

Hi.

I'm having problem with toggle button. It doesn't work. Nothing happens after I click on it.

I'm using material kit pro in my react project.

Do you know where the issue could be?

Dropdowns in the navbar work on desktops but do not function when collapsed, on mobile:

I found that CSS has only .container

.nav-open nav .container {
left: 0;
-webkit-transform: translate3d(-245px, 0, 0);
-moz-transform: translate3d(-245px, 0, 0);
-o-transform: translate3d(-245px, 0, 0);
-ms-transform: translate3d(-245px, 0, 0);
transform: translate3d(-245px, 0, 0); }

Hi,

I'm using Laravel to build my app, after buying this template here is what I did:

1. Copied assets to public/plugins/material-kit
2. Opened my login page and pasted your code.
3. Update the links on the page to include styles and scripts using Blade.
4. All style and script files are loaded successfully but the page is messed up.
5. No console errors are reported or 404 errors regarding styles, scripts or imgs.

Here is how the page looks like now: http://imgur.com/a/WTMhH

Error encountered in Mac chrome version 61.0.3163.79 (Official Build) (64-bit)
i had set the following header message.

I put a DateTimePicker in a Modal and this does not work, could help me with this, I have already searched and I have not found anything

Hi! If you want to have the default collapse of the navbar, please follow the next steps:

1. You must put on the body tag the class .bootstrap-collapse ( in case that you want to return to our collapse style please put the class on the body tag .material-collapse).

2. Go in the html pages and add to the button from the nav tag the attribute data-target="#menu" like in the example below:

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu">
             <span class="sr-only">Toggle navigation</span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
</button>

3. After that you must go below to the div with class .navbar-collapse and add the id on this div with the same value from the attribute data-target=" ", in our case the value menu:

<div class="collapse navbar-collapse" id="menu">
          //content
</div>

4. Now you have to go in assets/sass/material-kit/_responsive.scss and assets/sass/material-kit/_dropdown.scss and replace them with the scss partials that I uploaded here.

_dropdown.scss.zip
_responsive.scss.zip

5. Please compile your scss with Koala and be sure that your output path is assets/css/material-kit.css

Regards,
Dragos

Hi! For fixing this issue with title from page-header on responsive mode portrait and landscape mode please take the uploaded scss partial _headers.scss file and go in assets/sass/material-kit/sections/_headers.scss and replace with the new one. After you do that please compile your scss with Koala and be sure that your outputh path is assets/css/material-kit.css. Hope that will help you!

_headers.scss.zip

Regards,
Dragos

When checking your MK V1.1.1 "ecommerce" page, the rotating card works as expected in iOS and shows the rotated image as well as the contents (such as buttons) that are on the back. But on Windows 7 with IE only the image is shown and the buttons and other content on the back of the card are missing . This is with your own kit and nothing added, removed or changed.

Hi! For fixing the issue with navbar-burger take the uploaded file and just go to assets/sass/material-kit/_responsive.scss and replace the old file with the new one. Compile you're scss with Koala. Please be sure that you're output path is assets/css/material-kit.css. Hope that will help you!

_responsive.scss.zip

Regards,
Dragos

Currently the scrollHeight is set fix to 260px and is only changed on profile-page. I suggest a data-field in body.

Here's the code I use

var scrollHeight = $('body').data('scrollheight');

// not set in body?
            if (isNaN(parseInt(scrollHeight))) {
                scrollHeight = 260;
            }

My HTML looks like this:

`

Hey, I'm trying to use the Nav Pills, but for the vertical (with icons) option - I'm only able to add three, because they all seem to have to be tied to a pre-set id, namely, #dashboard-2, #schedule-2, and #tasks-2. I tried just adding another class (on the HTML), e.g. "#details-2" but it didn't work.
Is it possible to make extra nav pill id's so that I can have more than 3 nav pills?

Thanks

Same as the background content of rotating cards, this problem can be reproduced simply by opening your Material Kit live preview in Internet Explorer. This is with Internet Explorer set to all defaults.

Dynamic shadows are nice to have but not critical. The missing content on the back of rotating cards is very critical if an ecommerce "buy" button is placed on the back of a rotating card as in your ecommerce example.

Since both of these features don't work in IE but do work in other browsers, maybe there is some common initialization or debounce ?

There is nothing here, I am not sure why this is even a repo. You could add an encrypted version here or a demo.html thing. Just a though.

I believe this is different from #13 .

Repro steps:

1. use material-kit, add navbar, open on phone or in narrow browser

2. click menu (menu opens)

3. click menu (menu hides)

4. click menu again (menu opens)

5. click outside of menu (menu hides, but differently)

6. if you now click menu, you see it slide in and "animate out" immediately

7. if you click menu icon, header will adjust itself, but you're in step 6-7 loop
   The collapse state is inversed. Man this is buggy...

Workaround:
8. click menu (shows, but hides immediately)
9. dismiss the invisible menu by clicking on the left side of page (not menu)

Menu will work again.

Please fix this. I bought material-kit a month ago, started integrating it today, and spent hours on #13 and now I get hit by this. Thanks.

I was trying to read the docs about transparent navbars, and when clicking on the provided link to see more detailed examples on how to implement them I was lead to a 404 page, specifically: /HTML/navbar-transparent.html

http://demos.creative-tim.com/material-kit-pro/index.html

click the Javascript components -> Sign Up

The Register modal doesnt resize/respond. It works fine as stand alone here: examples/signup-page.html

On latest iOS, iphone 7, in Safari and chrome mobile browsers, the rotating card's back content isn't visible. When I rotate, the card flips, the content is shown for a split second, and then it disappears.

jQuery.Deferred exception: Cannot read property 'nodeName' of null TypeError: Cannot read property 'nodeName' of null
at Object.S [as create] (http://localhost:4200/assets/js/nouislider.min.js:3:18056)
at HTMLDocument. (http://localhost:4200/login?returnUrl=%2F:64:18)
at j (http://localhost:4200/assets/js/jquery.min.js:2:29948)
at k (http://localhost:4200/assets/js/jquery.min.js:2:30262)
at ZoneDelegate.invokeTask (http://localhost:4200/polyfills.bundle.js:3239:31)
at Zone.runTask (http://localhost:4200/polyfills.bundle.js:3006:47)
at ZoneTask.invoke (http://localhost:4200/polyfills.bundle.js:3301:38)
at timer (http://localhost:4200/polyfills.bundle.js:4381:29) undefined
r.Deferred.exceptionHook @ jquery.min.js:2
zone.js:169 Uncaught TypeError: Cannot read property 'nodeName' of null
at Object.S [as create] (nouislider.min.js:3)
at HTMLDocument. (login?returnUrl=%2F:64)
at j (jquery.min.js:2)
at k (jquery.min.js:2)
at ZoneDelegate.invokeTask (zone.js:398)
at Zone.runTask (zone.js:165)
at ZoneTask.invoke (zone.js:460)
at timer (zone.js:1540)