mdbootstrap/material-design-for-bootstrap

Important! A new UI Kit version for Bootstrap 5 is available. Access the latest free version via the link below.

material-design-for-bootstrap's Issues

li without bullets issue

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.

Integrate with Bootstrap Kit

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

Version or tag

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

Compile with libsass/node-sass

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``

.navbar-toggler-right is not displayed on firefox

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.

to be closed

Outline buttons syntax change

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

License?

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?)

MDB does not display .sticky

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 :-(

colors.scss ignores custom color setting

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.

[Feature Request] React support

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?

Variables not used in _navbars.scss

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

missing @import "mdb/pro/stepper"; in pro version

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";

btn-outline not changed on css of 4.2.0

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

SCSS Compiling error in tabs.scss

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.

Update "main" field in package.json to follow npm spec

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"

Horizontal Description :: .dl-horizontal

.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

colors.scss ignores custom color setting

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;
}
...

Bootstrap Flexbox grid

Hi

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

DXImageTransform.Microsoft.gradient

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.

SCSS Files in MDB_Pro-4.3.0.zip are outdated compared to free MDB

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.

Typo in _forms-basic.scss

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%; }

Difference in mb- mt- pb- pt- between mdb and bootstrap 4 alpha-6

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.

Updates for pro version

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

Labels do not work as expected with prefilled input controls

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

v3.4.0 mdbootstrap and ui-router. waves-effect not working

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.

accordion .collapse('show') - target item does not collapse other items in group

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

Tabs not looks like Material Design

Material Design

Angular Material

MDB

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

TypeError: body is null

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

Webpack support?

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

Documentation :: undefined class :: .bd-highlight

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/

Javascript dependencies

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?

Waves creates i from input.btn

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.

pb-x sizes in helpers.scss are wrong direction

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;
}

Allow to put mdb.js to header

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.

how to load mdbootstrap in an angular2 app using webpack?

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

to be closed

Accordion does not work as expected

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?

NVM

NVM

Uncaught TypeError: Cannot read property 'offsetWidth' of undefined at computeDimension (mdb.js:324) at new Chart (mdb.js:334)

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

What's wrong?

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

Dynamically set value for input field does not float label up

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

Select Box View issue

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.

Window.Waves is undefined when MDB Free is used into the NWJS.io

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!

Thumbnails Carousel breaks when is more thumbs

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

Cards not behaves like original card in Bootstrap 4 - img issue

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:

Pure-CSS float labels

Let's use?

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

Make border-radius a variable instead of hard coded

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

0.6rem is too small for the .btn-sm

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?

SASS Setup Example Request

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.

.img-fluid conflict

.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 )