Adding the MDB to an existing angular-cli project

Topic: Adding the MDB to an existing angular-cli project

Warren Stow free asked 6 years ago

I've wanted to see if MDB would be a good choice for my project so I tried testing the free version this morning.

I followed the instructions here: https://www.npmjs.com/package/angular-bootstrap-md

I had to change this:

"../node_modules/angular-bootstrap-md/scss/mdb.scss"

to this:

"../node_modules/angular-bootstrap-md/scss/mdb-free.scss" to get it to compile.

I've only tested the text input field but the label doesn't shrink and move up when it has focus.

Start your code here

<div class="md-form">
 <inputtype="text"id="form1"class="form-control">
 <labelfor="form1"class="">Example label</label>
 </div>

Any suggestions?

Warren Stow free commented 6 years ago

I'm using version 4.3.5 - my question format was messed up when I hit submit without this at first.

Chen Xiao pro commented 6 years ago

I use pro version, setup by the tutorial, but animated shrink not work either, I suspect is the wow.js not loaded.

Dawid Adach pro commented 6 years ago

Dear Warren, thanks, instruction was misleading, we have already fixed that!

Warren Stow free commented 6 years ago

I rolled back and started over using the updated instructions. No change. My input box displays with the label over it, when I start typing the label stays where it is and covers my input.

Dawid Adach pro commented 6 years ago

Dear Warren, please send me your project to d.adach@mdbootstrap.com

Warren Stow free commented 6 years ago

Wouldn't let me send a zip so I shared the project with you. Thanks

Add comment

Dawid Adach pro answered 6 years ago

0 0 Best answer

Warren,

you have missed  "<code class=" language-markup">mdbActive</code>" in your inputs. It should be :
<pre><code class=" language-markup"><div class="md-form">
 <input mdbActive type="text" id="form1" class="form-control">
 <label for="form1" class="">Example label</label>
</div>

</code></pre>

Please insert min. 20 characters.

Warren, you have missed "mdbActive" in your inputs. It should be :

<div class="md-form">
    <input mdbActive type="text" id="form1" class="form-control">
    <label for="form1" class="">Example label</label>
</div>

Juan Russo pro commented 6 years ago

Hi! I came to this thread because I had the same problem with the PRO version.with what you say, is solved. What happens is that the documentation in the part of the FORMS (https://mdbootstrap.com/angular/components/forms/) does not mention it, but in the part of the INPUT (https://mdbootstrap.com/angular/components/inputs/) it does. You should touch that part to avoid confusion.

Add comment

dxl pro answered 6 years ago

1 0 Best answer

How to add MDB Pro version to an existing project with CLI?

Dawid Adach pro commented 6 years ago

Dear dxl, you can use npm install option, please follow this guide : https://mdbootstrap.com/angular/5min-quickstart/

Damian Gemza staff commented 6 years ago

Hi dxl, Please follow instructions provided in link below. You have to scroll down to half of page, and on this nice, blue tab, please select PRO instead of FREE. https://mdbootstrap.com/angular/5min-quickstart/ Best Regards, Damian

Add comment

Chen Xiao pro answered 6 years ago