[Pro User] Pro Components not working

Topic: [Pro User] Pro Components not working

Vitor Pavanelli free asked 6 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 6 years ago

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

Add comment

Damian Gemza staff answered 6 years ago

0 0 Best answer

Dear Vitor Pavanelli,

Did you followed every steps carefoully ?

To your's global styles.scss file you have to add code below:
<pre class="code-toolbar language-css"><code class=" language-css">
.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; 
 } 
}
 </code></pre>
Then to your's index.html you have to add code below:
<pre class="code-toolbar language-markup"><code class=" language-markup">
<html lang="en" class="full-height">
 </code></pre>
Then to your's app.component.html you have to add code below:
<pre class="code-toolbar language-markup"><code class=" language-markup">

<header>

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

<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">
 
 <div class="card wow fadeInRight" data-wow-delay="0.3s">
 <div class="card-body z-depth-2">
 
 <div class="text-center">
 <h3>Write to us:</h3>
 <hr>
 </div>

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

<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>
 
 </div>
 </div>
 </div>
 </div>
 </div>
 </section>

</header>
</code></pre>

After all, it should works fine. But if not, please let me know.

Best Regards,

Damian

Please insert min. 20 characters.

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

Add comment

Closed

This topic is closed.

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

Vitor Pavanelli

12Support score
9Questions 15Answers 0Snippets