1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: [Pro User] Pro Components not working

Vitor Pavanelli free asked 7 years ago

Hi, I'm trying to recreate this page here: https://mdbootstrap.com/live/_MDB/index/docs/intros/intro-contact-form.html I followed the steps on the page and I get a blank page when loading. I do there is something loaded but everything is blank. I can attach project or add it to github if necessary. Please, what could be the problem? I need to have my project started. Thank you, Vitor

DanielNetzer free commented 7 years ago

can you send your app.module.ts file and your package.json?

Damian Gemza staff answered 7 years ago

Dear Vitor Pavanelli, Did you followed every steps carefoully ? To your's global styles.scss file you have to add code below: 
.intro-2 {
    background: url("https://mdbootstrap.com/img/Photos/Others/img%20(46).jpg")no-repeat center center;
    background-size: cover;
}
.top-nav-collapse {
    background-color: #ff8a65 !important;
}
.navbar:not(.top-nav-collapse) {
    background: transparent !important;
}
@media (max-width: 768px) {
    .navbar:not(.top-nav-collapse) {
        background: #ff8a65 !important;
    }
}
.md-form .prefix {
    font-size: 1.5rem;
    margin-top: 1rem;
}
h6 {
    line-height: 1.7;
}
@media (max-width: 740px) {
    .full-height,
    .full-height body,
    .full-height header,
    .full-height header .view {
        height: 1150px;
    }
}
Then to your's index.html you have to add code below: 
<html lang="en" class="full-height">
Then to your's app.component.html you have to add code below: 
<!--Main Navigation-->
<header>

    <!--Navbar-->
    <mdb-navbar SideClass="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar">
        <logo>
            <a class="logo navbar-brand waves-light" mdbRippleRadius href="#"><strong>MDB</strong></a>
        </logo>
        <links>
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active waves-light" mdbRippleRadius>
                    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item waves-light" mdbRippleRadius>
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item waves-light" mdbRippleRadius>
                    <a class="nav-link" href="#">Profile</a>
                </li>
            </ul>
            <form class="form-inline waves-light" mdbRippleRadius>
                <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
            </form>
        </links>
    </mdb-navbar>

    <!--Intro Section-->
    <section class="view intro-2 hm-stylish-strong">
        <div class="full-bg-img">
            <div class="container flex-center">
                <div class="d-flex align-items-center">
                    <div class="row flex-center pt-5 mt-3">
                        <div class="col-md-6 text-center text-md-left mb-5">
                            <div class="white-text">
                                <h1 class="display-4 wow fadeInLeft" data-wow-delay="0.3s">Lorem ipsum</h1>
                                <hr class="hr-light wow fadeInLeft" data-wow-delay="0.3s">
                                <h6 class="wow fadeInLeft" data-wow-delay="0.3s">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem repellendus quasi fuga nesciunt dolorum nulla magnam veniam sapiente, fugiat! Commodi sequi non animi ea dolor molestiae, quisquam iste.</h6>
                                <br>
                                <a class="btn peach-gradient wow fadeInLeft waves-light" data-wow-delay="0.3s" mdbRippleRadius>Learn more</a>
                            </div>
                        </div>

                        <div class="col-md-6 col-xl-5 offset-xl-1">
                            <!--Form-->
                            <div class="card wow fadeInRight" data-wow-delay="0.3s">
                                <div class="card-body z-depth-2">
                                    <!--Header-->
                                    <div class="text-center">
                                        <h3>Write to us:</h3>
                                        <hr>
                                    </div>

                                    <!--Body-->
                                    <div class="md-form">
                                        <i class="fa fa-user prefix grey-text"></i>
                                        <input type="text" id="form3" class="form-control" mdbActive>
                                        <label for="form3">Your name</label>
                                    </div>
                                    <div class="md-form">
                                        <i class="fa fa-envelope prefix grey-text"></i>
                                        <input type="text" id="form2" class="form-control" mdbActive>
                                        <label for="form2">Your email</label>
                                    </div>

                                    <!--Textarea with icon prefix-->
                                    <div class="md-form">
                                        <i class="fa fa-pencil prefix grey-text"></i>
                                        <textarea type="text" id="form8" class="md-textarea"></textarea>
                                        <label for="form8">Your message</label>
                                    </div>

                                    <div class="text-center">
                                        <button class="btn peach-gradient waves-light" mdbRippleRadius>Send</button>
                                        <hr>
                                        <fieldset class="form-group">
                                            <input type="checkbox" id="checkbox1">
                                            <label for="checkbox1">Subscribe me to the newsletter</label>
                                        </fieldset>
                                    </div>

                                </div>
                            </div>
                            <!--/.Form-->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

</header>
<!--Main Navigation-->
  After all, it should works fine. But if not, please let me know. Best Regards, Damian

Vitor Pavanelli free commented 7 years ago

hmmmm! it works!! I tried yesterday both places... global and app component html.. none worked!! the only thing I missed was the index.html. Thank you very much. sorry about that.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Closed

Specification of the issue
  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags
About author
Vitor Pavanelli
12Support score
9Questions 15Answers 0Snippets