Topic: admin dashboard with angular
Haso58 free asked 3 years ago
Hi,
I have a nrwl angular 10 project, where I am trying to implement an admin dashboard.So far I used the double navigation template from here:
my code for navigation:
<mdb-navbar-brand> <!-- Logo --> <li> <div class="logo-wrapper waves-light"> <a href="#"><img src="https://mdbootstrap.com/img/logo/mdb-transparent.png"
class="img-fluid flex-center">
<links> <!--Search Form--> <li> <form class="search-form" role="search"> <div class="form-group md-form mt-0 pt-1" mdbWavesEffect> <input type="text" class="form-control" placeholder="Search"> </div> </form> </li> <!--/.Search Form--> <!-- Side navigation links --> <li> <ul class="collapsible collapsible-accordion"> <mdb-accordion [multiple]="false" aria-multiselectable="false"> <!-- Collapsible link --> <mdb-accordion-item> <mdb-accordion-item-head mdbWavesEffect><mdb-icon fas icon="chevron-right"></mdb-icon> Collapsible menu </mdb-accordion-item-head> <mdb-accordion-item-body> <ul> <li><a href="#" mdbWavesEffect>Link 1</a></li> <li><a href="#" mdbWavesEffect>Link 2</a></li> </ul> </mdb-accordion-item-body> </mdb-accordion-item> <!-- Simple link --> <mdb-accordion-item class="no-collase"> <mdb-accordion-item-head mdbWavesEffect><mdb-icon far icon="hand-pointer"></mdb-icon> Simple link </mdb-accordion-item-head> <mdb-accordion-item-body></mdb-accordion-item-body> </mdb-accordion-item> <!-- Collapsible link --> <mdb-accordion-item> <mdb-accordion-item-head mdbWavesEffect><mdb-icon far icon="eye"></mdb-icon> Collapsible menu 2 </mdb-accordion-item-head> <mdb-accordion-item-body> <ul> <li><a href="#" mdbWavesEffect>Link 1</a></li> <li><a href="#" mdbWavesEffect>Link 2</a></li> </ul> </mdb-accordion-item-body> </mdb-accordion-item> <!-- Simple link --> <mdb-accordion-item class="no-collase"> <mdb-accordion-item-head mdbWavesEffect><mdb-icon far icon="gem"></mdb-icon> Simple link 2</mdb-accordion-item-head> <mdb-accordion-item-body></mdb-accordion-item-body> </mdb-accordion-item> </mdb-accordion> </ul> </li> <!--/. Side navigation links --> </links> <div class="sidenav-bg mask-strong"></div> </mdb-side-nav> <!--/. Sidebar navigation -->
<navlinks class="navbar-container"> <!-- SideNav slide-out button --> <div class="float-left"> <a (click)="sidenav.show()" class="button-collapse"><mdb-icon fas icon="bars"></mdb-icon></a> </div> <!--/. SideNav slide-out button --> </navlinks> <mdb-navbar-brand> <!-- Breadcrumb--> <div class="breadcrumbs breadcrumb-dn mr-auto"> <p>Material Design for Bootstrap</p> </div> <!--/. Breadcrumb--> </mdb-navbar-brand> <navlinks> <ul class="nav navbar-nav nav-flex-icons ml-auto ie-double-nav"> <li class="nav-item"> <a class="nav-link waves-light" mdbWavesEffect><mdb-icon fas icon="envelope"></mdb-icon> <span class="clearfix d-none d-sm-inline-block">Contact</span></a> </li> <li class="nav-item"> <a class="nav-link waves-light" mdbWavesEffect><mdb-icon far icon="comments"></mdb-icon> <span class="clearfix d-none d-sm-inline-block">Support</span></a> </li> <li class="nav-item"> <a class="nav-link waves-light" mdbWavesEffect><mdb-icon fas icon="user"></mdb-icon> <span class="clearfix d-none d-sm-inline-block">Account</span></a> </li> <li class="nav-item dropdown btn-group" dropdown> <a dropdownToggle type="button" class="nav-link dropdown-toggle waves-light" mdbWavesEffect> Dropdown </a> <div class="dropdown-menu dropdown-primary dropdown-menu-right" role="menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </li> </ul> </navlinks> </mdb-navbar> <!--/. Navbar -->
now I am trying to combine it with 3 cards in the main section, but this is where the code breaks, I have to get 3 cards in a row with equal space inbetween. But the design of the card is broken after inserting one card alone.
This is my code for card:
<!--Card image--> <div class="view view-cascade gradient-card-header blue-gradient"> <h2 class="card-header-title">Marta</h2> <p>Deserve for her own card</p> </div> <!--/Card image--> <mdb-card-body cascade="true" class="text-center"> <!--Card content--> <mdb-card-text> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam dignissimos neque rem nihil ratione est placeat vel, natus non quos laudantium veritatis sequi.Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam. </mdb-card-text> <!--Twitter--> <a class="icons-sm tw-ic"> <mdb-icon fab icon="twitter" class="px-2"> </mdb-icon> </a> <!--Linkedin--> <a class="icons-sm li-ic"> <mdb-icon fab icon="linkedin-in" class="px-2"> </mdb-icon> </a> <!--Facebook--> <a class="icons-sm fb-ic"> <mdb-icon fab icon="facebook-f" class="px-2"> </mdb-icon> </a> <!--Email--> <a class="icons-sm email-ic"> <mdb-icon fas icon="envelope" class="px-2"> </mdb-icon> </a> </mdb-card-body> <!--/.Card content-->
What I want to achieve is this here at least the first 3 cards:
Grzegorz Bujański staff answered 3 years ago
Hi. Did you try to use the grid system as in the admin template?
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-xl-4 col-md-6 mb-r">
// card-1
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-xl-4 col-md-6 mb-r">
// card-2
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-xl-4 col-md-6 mb-r">
// card-3
</div>
<!--Grid column-->
</div>
<!--Grid row-->
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: 10.0.0
- Device: Computer
- Browser: Chrome
- OS: Ubuntu
- Provided sample code: No
- Provided link: Yes