Please note this is for version 3.4.0.

Hi,
I would like to share a problem and solution I came across this morning whilst integrating mdbootstrap with my application. My stack is routed with the angular ui-router component and I was noticing that none of my buttons were getting the waves-effect ripple animation.

After some debugging I found this to be due to when the Waves are initialized with the displayEffect() function.

document.addEventListener('DOMContentLoaded', function () {
  Waves.displayEffect();
}, false);

With the angular ui-router component, the DOMContentLoaded method is fired prematurely to an application being fully loaded and instead I found hooking into the ui-router API event $viewContentLoaded to manually call the event, initialized the ripples properly.

$rootScope.$on('$viewContentLoaded', function() {
  Waves.displayEffect();
});

My next foreseeable problem will be with modals when they are initialized, or any other DOM manipulation that doesn't come from the ui-router skipping the $viewContentLoaded event.
Will keep post updated.

Problem: lists are without bullet by default in MDB.
Reason: is within _global.scss:

ul {
    padding: 0;
    list-style-type: none;
    li {
        list-style-type: none;
    }
}

Required: list should have bullets by default!

Solution: every developer can achieve lists without bullets by simly adding the Bootstrap class class="list-unstyled" to the <ul>tag.
As described in Bootstrap documentation

This should be getting fixed in MDB.

Label styling has an errant space that causes SASS compiled code to not apply Darken function.

https://github.com/mdbootstrap/bootstrap-material-design/blame/master/sass/mdb/free/_forms-basic.scss#L102

https://github.com/mdbootstrap/bootstrap-material-design/blame/master/css/mdb.css#L5893

label {
    font-size: $label-font-size;
    color: darken ($input-border-color, 90%);
}

The space between darken and the parenthesis open is invalid and causes the following incorrect css:

label {
font-size: 0.8rem;
color: darken #ccc, 90%; }

How about to share some base code with Bootstrap Kit?
Some components could be useful for generic Bootstrap and vice versa!

https://github.com/highweb/bootstrap-kit

.img-fluid is conflicting with bootstrap's declaration, specifically { display: block; }.

This class could probably be removed from the group ( .section img .section .view, .card img )

I´m using NWJS.io to create a app with MDB. But, the Waves.js (inside into mdb.js) can´t loaded. I tried to run the code of Waves.js into console of NWJS but "Window.Waves" is shown always as 'undefined'.
In the fist time that I opened the index.html inside 'MDB Free' a exceptions happens:

NOTE: I tried into Chrome Browser and there works fine!

This is an issue already reported at Nov,16th, 2016 but is still not fixed even reported by user mattonit as will be fixed and issue https://github.com/mdbootstrap/bootstrap-material-design/issues/29 is closed.

Colors setting are broken after update to latest MDB release.
Scenario: I have a separate custom.scss with variable declarartions, loaded before mdb.scss.
Pre set color variable are ignored and oversteered by MDB.

!default missing

This is how it is (from one item example from _colors.scss):

...
$secondary-color: #aa66cc;
...

This is it how it shoud be:

...
$secondary-color: #aa66cc !default;
...

This issue makes it impossible to oversteer color settings with an scss prior setting and makes a well scss structure impossible.

Example: http://codepen.io/NeonDevil/pen/xqbgZL

Steps to replicate:

1. All items are collapsed initially via html
2. .collapse('show') expands Item#2 on document.ready()
3. Click on Item#1 or Item#3
4. Click back on Item#2
5. Previous item does not collapse

Hello,

This looks like a great product, and I can't wait to use it.

However, will it work it React?
Does it depend on jQuery?

In the MDB-Pro 4.2.0 , I have included all scss file and all js modules in my app (specifically also the collapsible.js module) and copied your example template for accordion
`

<!--First panel-->
<div class="panel panel-default">

    <!--Panel heading-->
    <div class="panel-heading" role="tab" id="headingOne">
        <h5 class="panel-title">
            <a class="arrow-r" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-   expanded="true" aria-controls="collapseOne"> Collapsible Group Item #1<i class="fa fa-angle-down rotate-icon"></i>
            </a>
        </h5>
    </div>

    <!--Panel body-->
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
        on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
        raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
    </div>
</div>
<!--/.First panel-->

<!--Second panel-->
<div class="panel panel-default">

    <!--Panel heading-->
    <div class="panel-heading" role="tab" id="headingTwo">
        <h5 class="panel-title">
            <a class="arrow-r" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="true" aria-controls="collapseOne">
               Collapsible Group Item #2<i class="fa fa-angle-down rotate-icon"></i>
            </a>
       </h5>
    </div>

    <!--Panel body-->
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
        on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
        raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
    </div>
</div>
<!--/.Second panel-->

<!--Third panel-->
<div class="panel panel-default">

    <!--Panel heading-->
    <div class="panel-heading" role="tab" id="headingThree">
        <h5 class="panel-title">
            <a class="arrow-r" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="true" aria-controls="collapseOne">
                Collapsible Group Item #3<i class="fa fa-angle-down rotate-icon"></i>
            </a>
        </h5>
    </div>

    <!--Panel body-->
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
        on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
        raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
    </div>
</div>
<!--/.Third panel-->

but it does not work as expected: when clicking on an element the arrow icon is not rotated and clicking on a panel does not collapse other panels already open in the same accordion, why?

In the Pro version of mdbootstrap 4.2.0 in the sass folder, the file mdb.scss is missing the following import statement @import "mdb/pro/stepper";

In your latest release, you opted for a 2px border radius with no way to easily override that setting. I propose you add a variable to allow for a custom value in the _variables.scss file.

In my case, we prefer the square corners of most elements.

Thanks,

Mike

here an example (official website)

https://mdbootstrap.com/download/templates/bootstrap/free/half-page-carousel/index.html

toggle button is not showing on firefox.

If one tries to call the page on mobile then the toggle button under firefox is not displayed.

In alpha-6 the padding and margin changed and now pt-3, for example, is much smaller than it used to be (in alpha 5/4, etc.). In mdb, however, mb- mt- pb- pt- still have the old sizes. In my workflow, for example, I work on pure bootstrap 4 alpha 6 and when I apply mdb everything needs to be adjusted back. Do you plan on synchronizing padding and margin properties with alpha 6 any time soon? I hate doing the same work over and over again.

This library provides a big file (more than 5000 lines) called mdb.js in the js folder of the repo which includes all the dependencies that you are using (e.g jquery-easing.js ,global.js, velocity.js, etc) and some initialization options. I would have expected to find a small js file and all dependecies listed in the bower.json or package.json so that they could be installed through bower install or npm install. Am I missing something?

Colors setting are broken after update to latest MDB release.
Scenario: I have a separate custom.scss with variable declarartions, loaded before mdb.scss.
Two issues: pre set color variable are ignored and oversteered by MDB.

!default missing

This is how it is (from one item example from _colors.scss):

...
$primary-color: #4285F4;
...

This is it how it shoud be:

...
$primary-color: #4285F4 !default;
...

Variable missing

Also it would be a better approach to set colors by variables. This would simplify changing the colors of an color-variable would change the color allover the color-variable is used. I think this was already in previously releases. Don't know why that approach was dropped.

This is how it is (from one item example from _colors.scss):

...
.primary-color {
    background-color: #4285F4!important;
}
...

This is it how it shoud be

...
.primary-color {
    background-color: $primary-color !important;
}
...

Let's use?

https://github.com/tonystar/float-label-css
https://github.com/tonystar/bootstrap-float-label

Hi

I cannot figure out how to use the bootstrap flexbox grid in MDBootstrap. Is this something you have turned off?

Elements with class sticky are not displayed on smaller devices < 768px.
This is wrong.

Reason:
scrollspy.scss

@media only screen and (max-width: 769px) {
    .sticky,
    .sticky-placeholder {
        display: none; 
    }
}

Solution:
Restrict your css code by adding id or class rules for your scrollspy so .sticky display none has no inpact of .sticky use in other code areas. Thank you.

The same for all other .sticky style modifications in your scss files. Please don't define it general make it more specific (add classes or id). Something like this

@media only screen and (min-width: 1200px) {
    .col-md-4 .sticky {
        width: 300px;
    }
}

has impact on all pages :-(

When tries to set value to input field by typing value, the label floats
but when trying to set value programmatically the does not float upward. Both label and value overlaps on each other

We have lot of inline javascripts generated via backend. If these scripts use mdb functions, they will crash, because mdb.js requires to include it at the end of HTML body.

Only way I see to make this currently work is to wrap all of the inline scripts to some function, which sucks.

padding bottom should be a padding at the bottom, but in helpers.scss it sets a padding top! Wrong!
Here how it is, it should be fixed!

.pb-1 {
    padding-top: 1rem !important;
}

.pb-2 {
    padding-top: 2rem !important;
}

.pb-3 {
    padding-top: 3rem !important;
}

Bootstrap v4 uses .bd-highlight to show background-color and borders:
http://v4-alpha.getbootstrap.com/utilities/flexbox/

This class is undefined in the mdbootstrap docs and makes the examples hard to interpret:
https://mdbootstrap.com/css/flexbox/

In _navbars.scss the colors are hard coded instead of refering to variables, e.g line 78 (navbar-light.active).
It would be worth to use the Bootstrap color variables instead. This would support customers to be capable of overriding values easily.

The Bootstrap variables are:

$navbar-dark-color
$navbar-dark-hover-color
$navbar-dark-active-color
$navbar-dark-disabled-color

$navbar-light-color
$navbar-light-hover-color
$navbar-light-active-color
$navbar-light-disabled-color

At CSS the classes are still .btn--outline instead of .btn-outline- overwriting bootstrap classes and the outlined buttons are taking values of .btn class instead

NVM

The "main" field should point to the javascript file so that require() calls can correctly look up the correct javascript file to import.

Spec Reference: https://docs.npmjs.com/files/package.json#main
Example from BS4: https://github.com/twbs/bootstrap/blob/v4-dev/package.json#L41

New "main" field in package.json should be "main": "js/mdb"

When trying to make a simple piechart, I get this error.

What's wrong?

You can see it here: https://valleedelisle.com/test

Material Design

Angular Material

MDB

There is chance that you will add extra styling that be more similar to original tabs in Material Design?

Can someone help me with compiling MDB with libsass (via node-sass)?

My libsass version is 3.13.1.

The error message is Error: ("lighten-5": #fafafa, "lighten-4": #f5f5f5, "lighten-3": #eeeeee, "lighten-2": #e0e0e0, "lighten-1": #bdbdbd, "base": #9e9e9e, "darken-1": #757575, "darken-2": #616161, "darken-3": #424242, "darken-4": #212121) isn't a valid CSS value.

The reason is @if map-has-key($curr_color, $type) { line in the `_colors.scss``

.dl-horizontal doesn't align items horizontally
https://mdbootstrap.com/css/typography/#horizontal-description

bootstrap v4 docs use .row class instead:
http://v4-alpha.getbootstrap.com/content/typography/#description-list-alignment

want to include mdbootstrap in my angular2 app using webpack, not getting how to include it..

There is a not valid line in tabs.scss.

mdb/pro/_tabs.scss:152 Invalid CSS after "...clude flexbox()

The semicolon is missing it should be @include flexbox();

Sorry, but such errors could be prevent by some QA task.

Form labels do not detect that the input control has content until it is focused.

DXImageTransform.Microsoft.gradient gives a lot of CSS error in the browser console: "Unexpected CSS token".

DXImageTransform.Microsoft.gradient is deprecated as with IE9.

So for Bootstrap 4 there is no need to have this CSS anymore. For cleaner, valid and better code I suggest to remove the DXImageTransform.Microsoft from MDBootstrap.

It would help if Git tag and Github version are used in this repo.

Hi, I'm updating MDB to 4.2 and I find the new font-size for .btn-sm is too small.

.btn-sm is 0.875rem in bootstrap
MDB 4.2 override it to 0.6rem

I think it is OK only for uppercase English letters.
When it comes to Chinese characters, I can hardly see 0.6rem characters clearly even in my Retina display monitor. It must be worse in a normal 1x monitor.
MDB 4.1.1 ↓

MDB 4.2↓

Will you consider change it back in future versions?

http://mdbootstrap.com/javascript/carousel/

In Bootstrap 4 alpha.3 the .btn-*-outline classes have been renamed to .btn-outline-*, however this change is not yet reflected in mdbootstrap.

Reference: twbs/bootstrap#18772

How are updates supposed to be delivered for the pro version?

MDB Waves transfers HTML code

<input type="submit" class="btn btn-primary value="Submit">

into

<i class="btn btn-primary text-uppercase waves-input-wrapper waves-effect waves-light" style="color:rgb(255, 255, 255);background:rgba(0, 0, 0, 0)">
<input type="submit" class="waves-button-input" value="Send" style="background-color:rgba(0,0,0,0);">
</i>

This is wrong, the i tag should not exists.

I haven't been able to build and include mdbootstrap with webpack. Does it support building with webpack?

Would be helpful either to have in the Github project and/or website a skeleton setup for SASS. I'm a pro subscriber and have access to the admin example and it wasn't apparent that the vanilla mbd.css has been modified for the specific project templates. Therefore it would be great to have a starting point to start from the initial scss files and have examples to modify the css using SASS for different projects.

What license is this project under?

I see both bower.json and package.json state this is MIT licensed, but license.pdf is something else.

If it's MIT, you should include the MIT license text in a license.txt or similar.

If not, you should probably povide an actual license legal text, the PDF is very ambiguous, which is quite worrying for many possible users of this project. (What does "Offer PSD/HTML to users of your service" mean, for example? If a user visits my website, my servers will send HTML to his browser... Is that against the license?)

Basically when you have a select box it throws off some of the text like it does not if into it for some reason. Like for instance I have the word Industry and it cuts off the bottom of the Y and some of the text.

SCSS Files in MDB_Pro-4.3.0.zip are outdated compared to free MDB, e.g. data/color.scss.
The file color.scss within the zip-file does miss !default command but in the free repo is included. Seems a missmatch of data and versions.

What other files within the MDB PRO zip file are outdated compared to the latest free version is unknown and not tested.

When I add picture with different sizes to card I expect that image will automatically be extended to whole space in img box and the cards will have the same height always.

Cards in Bootstrap 4 Alpha

How it works in MDB right now:

I included mdb.js in head and Im getting

TypeError: body is null

Code:

   Waves.init = function (options) {
        var body = document.body;

        options = options || {};

        if ('duration' in options) {
            Effect.duration = options.duration;
        }

        if ('delay' in options) {
            Effect.delay = options.delay;
        }

        if (isTouchAvailable) {
            body.addEventListener('touchstart', showEffect, false);
            body.addEventListener('touchcancel', TouchHandler.registerEvent, false);
            body.addEventListener('touchend', TouchHandler.registerEvent, false);
        }

        body.addEventListener('mousedown', showEffect, false); //TypeError: body is null
    };

Error is marked on last line