When using the following input code, floating labels aren't triggering on auto-fill for the Password inputs (they're working fine for text inputs):

<div class="row">
    <div class="col-md-8 col-md-offset-2">
        <div class="form-group">
            <input type="email" class="form-control floating-label input-lg" name="email" placeholder="Username or Email" value="{{ old('email') }}">
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-8 col-md-offset-2">
        <div class="form-group">
            <input type="password" class="form-control floating-label input-lg" name="password" placeholder="Password" value="">
        </div>
    </div>
</div>

Screenshot:

I'am using this project in my meteor project, and i found the version is still 0.3.0, which is too old, there is big difference between demo and my developed project. maybe you have forgotten updating it or something others. wish that, and i am willing to help : ) !

updating icon fonts w/ 24px baseline grid.

I still need to add the new CSS, however, I'm not exactly sure where this should go. It seems the only place we have the styles for the icon font are on the compiled CSS in the "dist" directory. However, I don't know if that's the best place for it since we have both SASS and LESS here.

the specs for checkboxes was updated, this is a good CSS only implementation of them.

http://jsfiddle.net/cavico/a7u9jwhn/1/

we should update our implementation.

We have been discussing a release of v4 because it seems very stable (even more so than the current master), yet the only concern being that we are on the tip of the BS4 master.

v3 has been stable but is not being actively developed. BS v3 has also switched to critical bug fixes only so we should be getting near BS4 stability.

The v4 build is setup to one-step publish, we just need to enable it. We are in a position to release v4 as frequently as necessary, which would allow users to pick their stable version (meaning that the latest version may not always be incrementally better). Nonetheless, users would have bower tags and npm versions to lock onto if necessary.

@FezVrasta and I are in favor of incremental publishing of v4 and promoting it to master.

With that said, we really need some others to step up and pitch in to maintaining. @FezVrasta and I have other priorities right now and we will need additional maintainers to step up. I a have to move on to other projects. If you are interested in becoming a major contributor, please contact @FezVrasta.

Here is the proposed procedure:

• [x] #1045 resolve build issue with bootsrap js (expected in alpha.4)
• [x] #1003 babel-polyfill (expected as resolved but cannot test without #1045)
• [x] add a "past releases link" in the v4 docs that shows the v3 pages
• [x] @FezVrasta update the readme
• [x] @FezVrasta - give the v4 docs homepage some love
• [x] close all v3 issues with a message that states issue is archived; PR's accepted but maintainers aren't accepting additional issues without PRs, and refer to this issue.
• [ ] merge v4 to master
• [ ] branch v3-maintenance - permanant maintenance branch
• [ ] ?? - publish as often as needed

Tracking issues

Use this link to filter the issues and see only the ones related to our V4 implementation: https://github.com/FezVrasta/bootstrap-material-design/issues?utf8=%E2%9C%93&q=is%3Aissue%20is%3Aopen%20-label%3Av3%20

What I need from you:

• If you agree with this, just 👍 with the github reactions (not a new message)
• If you agree generally, 👍 with the github reactions and comment with your unique additions/objections
• If you disagree, please 👎 with github reactions, and if not already mentioned, comment with your unique objection.

Test Case

I don't have Codepen URL as i am working on big project in angular and having issue related to checkbox in that

Summary

browser/OS : Chrome/Win 7

in my project i have added bootstrap-material-design.min.js and bootstrap-material-design.min.css. Also i have added below line in my app js: $('body').bootstrapMaterialDesign({ });

All checkboxes and radios are working fine on initial load. Because as it is angular 4 my project will load only once. But after that if i switch to another page and come down to same page again i don't see any checkboxes but can see radios and other controls.

Expected result

checkboxes should be there even after initial load as well.

Additional Information

Here is the code

<div class="checkbox">
                            <label>
                                <input type="checkbox"> Check me out
                            </label>
                        </div>

and in the browser it looks like this

<span class="bmd-form-group is-filled"><div _ngcontent-c4="" class="checkbox">
								<label _ngcontent-c4="">
									<input _ngcontent-c4="" id="checkbox" name="check1" type="checkbox"><span class="bmd-switch-track"></span>
								</label>
							</div></span>

Please help.

general issue => also occurs official website : http://rosskevin.github.io/bootstrap-material-design/examples/dashboard/

Test Case

http://codepen.io/rosskevin/pen/eJMMVB

Summary

Execution error :

• bootstrap-material-design.iife.min.js:1 => Uncaught ReferenceError: require is not defined

More specifically (using bootstrap-material-design.iife.js in place of bootstrap-material-design.iife.min.js ) polyfill.js:1Uncaught ReferenceError: require is not defined e @ polyfill.js:1 (anonymous function) @ polyfill.js:1 createCommonjsModule @ bootstrap-material-design.iife.js:12 (anonymous function) @ bootstrap-material-design.iife.js:94 (anonymous function) @ bootstrapMaterialDesign.js:205

• pen.js:20 => Uncaught TypeError: $(...).bootstrapMaterialDesign is not a function

Expected result

Script is not working ...

Additional Information

This problem happens since today.

This program is free software

Then, later...

You cannot sell this software

This is decidedly not free software, and I would ask that you kindly stop claiming that it is. The definition of free software by the Free Software Foundation explicitly grants users the freedom to distribute copies of the software, modified or not, without any further restrictions. Please do not dilute the meaning of the term "free software" any further by continuing to include this false statement in your license file.

Alternatively, you could remove the non-commercial clause, or even better, just use the GNU GPLv3 in its full form, instead of trying to imitate parts of it, which would better protect you (and everyone else) legally.

Thanks.

I was using your library to create a web. It main color is orange. I was looking at oranges at material design in google page and some colors convinced me. When i used it with the library i noticed that "Orange" color and "Amber" color uses a light font color (darkbg-text) and Google material oficial uses a dark font color (lightbg-text). It is a bit unreadable, I was thinking on a solution looking at current code. I dont know so much about less but i think that something like this could work:

In "_mixins.less":

.background-variations(@extra) {

    .background-variations-factory(@material-color) {
        .background-variations-factory-deep(@material-color-number) {
            &-material-@{material-color}-@{material-color-number} {
                background-color: @@{material-color}-@{material-color-number};
                color:  @@{material-color}-@{material-color-number}-text;
            }
        }

        .background-variations-factory-deep("50");
        .background-variations-factory-deep("100");
        .background-variations-factory-deep("200");
        .background-variations-factory-deep("300");
        .background-variations-factory-deep("400");
        .background-variations-factory-deep("500");
        .background-variations-factory-deep("600");
        .background-variations-factory-deep("700");
        .background-variations-factory-deep("800");
        .background-variations-factory-deep("900");
        .background-variations-factory-deep("A100");
        .background-variations-factory-deep("A200");
        .background-variations-factory-deep("A400");
        .background-variations-factory-deep("A700");
    }
    .background-variations-factory("red");
    .background-variations-factory("pink");
    .background-variations-factory("purple");
    .background-variations-factory("deeppurple");
    .background-variations-factory("indigo");
    .background-variations-factory("blue");
    .background-variations-factory("lightblue");
    .background-variations-factory("cyan");
    .background-variations-factory("teal");
    .background-variations-factory("lightgreen");
    .background-variations-factory("lightyellow");
    .background-variations-factory("orange");
    .background-variations-factory("deeporange");
    .background-variations-factory("grey");
    .background-variations-factory("bluegrey");
    .background-variations-factory("brown");
    .background-variations-factory("lightgrey");
}

In "_variables.less" where red, pink, purple... are:

@red: #F44336;          @red-text: @darkbg-text;
@red-50: #FFEBEE;       @red-50-text: @lightbg-text;
@red-100: #FFCDD2;      @red-100-text: @lightbg-text;
@red-200: #EF9A9A;      @red-200-text: @lightbg-text;
@red-300: #E57373;      @red-300-text: @lightbg-text;
@red-400: #EF5350;      @red-400-text: @lightbg-text;
@red-500: #F44336;      @red-500-text: @darkbg-text;
@red-600: #E53935;      @red-600-text: @darkbg-text;
@red-700: #D32F2F;      @red-700-text: @darkbg-text;
@red-800: #C62828;      @red-800-text: @darkbg-text;
@red-900: #B71C1C;      @red-900-text: @darkbg-text;
@red-A100: #FF8A80;     @red-A100-text: @lightbg-text;
@red-A200: #FF5252;     @red-A200-text: @darkbg-text;
@red-A400: #FF1744;     @red-A400-text: @darkbg-text;
@red-A700: #D50000;     @red-A700-text: @darkbg-text;

@pink: #E91E63;         @pink-text: @darkbg-text;
@pink-50: #FCE4EC;      @pink-50-text: @lightbg-text;
@pink-100: #F8BBD0;     @pink-100-text: @lightbg-text;
@pink-200: #F48FB1;     @pink-200-text: @lightbg-text;
@pink-300: #F06292;     @pink-300-text: @lightbg-text;
@pink-400: #EC407A;     @pink-400-text: @lightbg-text;
@pink-500: #E91E63;     @pink-500-text: @darkbg-text;
@pink-600: #D81B60;     @pink-600-text: @darkbg-text;
@pink-700: #C2185B;     @pink-700-text: @darkbg-text;
@pink-800: #AD1457;     @pink-800-text: @darkbg-text;
@pink-900: #880E4F;     @pink-900-text: @darkbg-text;
@pink-A100: #FF8A80;    @pink-A100-text: @lightbg-text;
@pink-A200: #FF5252;    @pink-A200-text: @darkbg-text;
@pink-A400: #FF1744;    @pink-A400-text: @darkbg-text;
@pink-A700: #D50000;    @pink-A700-text: @darkbg-text;
....

and so on...

Then .background-variations(@extra) should be called on each element with a non transparent background.

It will compile? should i add something else to get it working? should i finish the work and make a pull request?

Sorry if u cant understand something. I dont speak a very good english.

Thanks for reading!

Looks like @shockwork have not enough time to maintain the SASS files, if someone is willing to support me updating them to 0.2.0 please send a PR.

Thanks!

During the gulp build, I encountered the following error message.

Error in plugin 'sass'
Message:
    _assets/vendor/bootstrap-material-design/sass/_import-bs-sass.scss
Error: File to import not found or unreadable: bootstrap/variables
       Parent style sheet: /Users/***/workspace/blog/_assets/vendor/bootstrap-material-design/sass/_import-bs-sass.scss
        on line 1 of _assets/vendor/bootstrap-material-design/sass/_import-bs-sass.scss
>> @import "bootstrap/variables";
   ^

When I change the @import statement to the following it works fine.

// bootstrap-material-design/sass/_import-bs-sass.scss
@import "variables";

Just want to raise the issue in case no one has noticed, but I believe mdb 6.1.0 does not work with bootstrap 5.3.0-alpha1 dark mode. Seems like mdb is overriding the color scheme to stay in light mode, even if dark mode is set.

https://getbootstrap.com/docs/5.3/customize/color-modes/

For code like the following, the xs property doesn't function. <MDBCol xs="6" sm="4" lg="2" className="col-6 kanji-tile-col d-flex justify-content-center"> <MDBCard className="kanji-tile-card"> <MDBCardBody> <MDBCardTitle className="kanji-character">{ props.character }</MDBCardTitle> <MDBCardText className="kanji-voting"> <button className="upvote"><MDBIcon fas icon="angle-up" /></button> <span className="vote-count">104</span> <button className="downvote"><MDBIcon fas icon="angle-down" /></button> </MDBCardText> </MDBCardBody> </MDBCard> </MDBCol>

I can override it by adding stylings to other breakpoints and adding the col-6 class, but the xs functionality is not there.

Hello

I am using MDB v6.0.1. I want to remove ripple effect in entire application including buttons and Anchor tag. can you please help me.

I am using mdb.min.js only

There is glitch when I click on the buttons. I have attached screen capture for that.

Hello team, I use the framework since some years and I´m very happy with it. But the Tabs are not realy material conform. For this I created a npm mudule with real material tab design. It also stores the last selected tab.

Propably it can be usefullfull for the project. https://www.npmjs.com/package/h2-invent-material-tabs

Best regards

I made a container on my page (position relative) and placed a sidenav in it. The sidenav is positioned fixed by default (like an offcanvas), but there is a possibility to position the sidenav absolute by adding the 'position-absolute' class or by declaring 'data-mdb-position="absolute"'. Both ways are causing a bug though: I can click the toggle button to open the menu, but the toggle doesn't close it anymore. Also my close-button doesn't close the menu anymore.

<h3 id="inbox">Inbox</h3> <!-- inbox component --> <div class="container p-3 m-0 border border-dark" style="overflow-x:hidden; min-height:500px; height:auto;"> <div class="container border-bottom border-primary p-0 pb-1 m-0 mb-3"> <button type="button" class="btn btn-primary btn-floating shadow-0 d-inline" data-mdb-toggle="sidenav" data-mdb-target="#sidenav-inbox-filter" aria-controls="#sidenav-inbox-filter" aria-haspopup="true" aria-expanded="false"> <i class="fa-light fa-bars-sort"></i> </button> <h2 class="m-0 ms-3 fw-bold d-inline">Inbox</h2> </div> <div class="position-relative"> <nav id="sidenav-inbox-filter" class="sidenav h-auto shadow-0" data-mdb-close-on-esc="false" data-mdb-hidden="true" data-mdb-position="fixed" data-mdb-mode="side" data-mdb-content="#inboxContent" data-mdb-focus-trap="false"> <ul class="sidenav-menu"> <!-- Tasks --> <li class="sidenav-item border rounded mb-1"> <a class="sidenav-link"> <i class="fa-light fa-list-check fa-fw me-3"></i><span class="fw-bold">Tasks</span> </a> <ul class="sidenav-collapse show"> <hr class="dropdown-divider m-0" /> <li class="sidenav-item p-2"> <div class="form-check"> <input class="form-check-input" type="radio" name="flexRadioDefaultB" id="flexRadioDefaultB1" checked /> <label class="form-check-label" for="flexRadioDefaultB1">My tasks</label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="flexRadioDefaultB" id="flexRadioDefaultB2" /> <label class="form-check-label" for="flexRadioDefaultB2">Work stock</label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="flexRadioDefaultB" id="flexRadioDefaultB3" /> <label class="form-check-label" for="flexRadioDefaultB3">All open tasks</label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="flexRadioDefaultB" id="flexRadioDefaultB4" /> <label class="form-check-label" for="flexRadioDefaultB4">Completed tasks</label> </div> </li> </ul> </li> </ul> </nav> <div id="inboxContent" class=" table-responsive my-3"> <table class="table table-striped table-hover table-slectable border"> <thead class="table-primary"> <tr> <th class="th-sm"> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" /> </div> </th> <th class="th-sm">Name</th> <th class="th-sm">Position</th> <th class="th-sm">Office</th> <th class="th-sm">Age</th> <th class="th-sm">Start date</th> <th class="th-sm">Salary</th> <th class="th-sm">Options</th> </tr> </thead> <tbody> <tr> <td> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" /> </div> </td> <td>Tiger Nixon</td> <td>System Architect </td> <td>Edinburgh</td> <td>61</td> <td>2011/04/25</td> <td>$320,800</td> <td class="position-relative"> <a href="#!" role="button" class="dropdown-toggle dropdown-toggle-rm-icon d-block text-end"> <i class="fa-light fa-ellipsis-vertical"></i> </a> </td> </tr> <tr> <td> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" /> </div> </td> <td>Garrett Winters</td> <td>Accountant</td> <td>Tokyo</td> <td>63</td> <td>2011/07/25</td> <td>$170,750</td> <td> <a href="#!" role="button" class="dropdown-toggle dropdown-toggle-rm-icon d-block text-end"> <i class="fa-light fa-ellipsis-vertical"></i> </a> </td> </tr> <tr> <td> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" /> </div> </td> <td>Ashton Cox</td> <td>Junior Technical Author</td> <td>San Francisco</td> <td>66</td> <td>2009/01/12</td> <td>$86,000</td> <td> <a href="#!" role="button" class="dropdown-toggle dropdown-toggle-rm-icon d-block text-end"> <i class="fa-light fa-ellipsis-vertical"></i> </a> </td> </tr> <tr> <td> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" /> </div> </td> <td>Cedric Kelly</td> <td>Senior Javascript Developer</td> <td>Edinburgh</td> <td>22</td> <td>2012/03/29</td> <td>$433,060</td> <td> <a href="#!" role="button" class="dropdown-toggle dropdown-toggle-rm-icon d-block text-end"> <i class="fa-light fa-ellipsis-vertical"></i> </a> </td> </tr> <tr> <td> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" /> </div> </td> <td>Airi Satou</td> <td>Accountant</td> <td>Tokyo</td> <td>33</td> <td>2008/11/28</td> <td>$162,700</td> <td> <a href="#!" role="button" class="dropdown-toggle dropdown-toggle-rm-icon d-block text-end"> <i class="fa-light fa-ellipsis-vertical"></i> </a> </td> </tr> </tbody> </table> </div> </div> </div>

Issue

When adding border-warning (or any other color) border of card doesn't have set color. (dark version)

Photo

Code to reproduce

<div class="card bg-dark rounded-6 border border-4 border-warning">
    <div class="card-title pt-4">
        <h2 class="font-weight-bold">Example</h2>
    </div>
</div>