Register modal does not look the same as example

Start your code here

<button type="button" class="btn btn-primary waves-light" (click)="form.show()" mdbWavesEffect>Register form</button>
<!--Modal: Register Form-->
<div mdbModal #form="mdb-modal" class="modal fade" id="modalRegister" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog cascading-modal" role="document">
        <!--Content-->
        <div class="modal-content">

            <!--Header-->
            <div class="modal-header light-blue darken-3 white-text">
                <h4 class="title"><i class="fa fa-user-plus"></i> Register</h4>
                <button type="button" class="close waves-effect waves-light" data-dismiss="modal" aria-label="Close" (click)="form.hide()">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <!--Body-->
            <div class="modal-body">
                <div class="md-form form-sm">
                    <i class="fa fa-envelope prefix"></i>
                    <input mdbInputDirective type="text" id="form32" class="form-control">
                    <label for="form32">Your email</label>
                </div>

                <div class="md-form form-sm">
                    <i class="fa fa-lock prefix"></i>
                    <input mdbInputDirective type="password" id="form33" class="form-control">
                    <label for="form33">Your password</label>
                </div>

                <div class="md-form form-sm">
                    <i class="fa fa-lock prefix"></i>
                    <input mdbInputDirective type="password" id="form34" class="form-control">
                    <label for="form34">Repeat password</label>
                </div>

                <div class="text-center mt-2">
                    <button class="btn btn-info waves-light" mdbWavesEffect>Sign up <i class="fa fa-sign-in ml-1"></i></button>
                </div>

            </div>
            <!--Footer-->
            <div class="modal-footer">
                <div class="options text-center text-md-right mt-1">
                    <p>Already have an account? <a href="#">Log In</a></p>
                </div>
                <button type="button" class="btn btn-outline-info ml-auto" data-dismiss="modal" (click)="form.hide()" mdbWavesEffect>Close</button>
            </div>
        </div>
        <!--/.Content-->
    </div>
</div>
<!--Modal: Register Form-->
                

Damian Gemza staff commented 6 years ago

Dear Silic, Could you please show me screenshot of your actual modal register behavior? I've pasted your code, and for me, it looks identical with this modal from our docs. Best Regards, Damian

---

Silic pro commented 6 years ago

How do I post a screenshot here?

---

Damian Gemza staff commented 6 years ago

Paste me a link to some service like imageshack, or post screenshot in next answer.

---

Silic pro commented 6 years ago

Damian, Here is a link to the image: http://imagizer.imageshack.us/a/img923/1124/3WmGkp.png I'm not sure how that will help you figure out what the problem is thought. I could create a new GitHub project and repeat the problem. That will take me a while. Alain

---

Damian Gemza staff commented 6 years ago

I don't see any problems on your picture. Please create a reproduction repo and send me link to it via email: d.gemza@mdbootstrap.com

---

Silic pro commented 6 years ago

Damian, I should of entered some data to illustrate the point. Look at this one: https://imageshack.com/a/img921/6483/uqWWUF.png. Alain

---

Silic pro commented 6 years ago

Damian, I've created a GitHub project illustrating this issue here: https://github.com/alaingmail/angular6-mdbootstrap-demo.git. Look at how the validation messages in red get almost overlap the input labels. This demo is not as bad as what I see in my actual application. The labels completely overlap, but it's using the pro version. Alain

---

Damian Gemza staff commented 6 years ago

Dear Silic, Labels overlap is okay. It should look the same as in your picture. Do you have any suggestion to change the appearance of those label overlapping? Best Regards, Damian

---