Topic: Accordion Item Positioning changed after Update
I Updated to the latest Version 7.5.3
Expected behavior Before the update the text was behind the Icon.
Actual behavior The text is on the right Side of the Element. It comes from the justify-content-between of the h5 element.
Resources (screenshots, code snippets etc.) Code from Chrome
<mdb-accordion-item class="no-collase ng-star-inserted">
<div class="card is-collapsed" ng-reflect-klass="card " ng-reflect-ng-class="[object Object]">
<mdb-accordion-item-head href="#" mdbwaveseffect="" routerlinkactive="active" tabindex="0"
ng-reflect-router-link="xxx" ng-reflect-router-link-active-options="[object Object]"
ng-reflect-router-link-active="active" class="">
<div class="card-header" ng-reflect-klass="card-header " ng-reflect-ng-class="[object Object]"
id="mdb-accordion-head-77"><a href="" role="button" aria-expanded="false"
aria-controls="mdb-accordion-body-77">
<h5 class="mb-0 d-flex justify-content-between align-items-center"><i
class="fas fa-users xxx-icon-width"></i> Team Member
<i aria-hidden="true" class="mdb-accordion-indicator rotate-icon ng-star-inserted"></i></h5>
</a></div>
</mdb-accordion-item-head>
<mdb-accordion-item-body class="ng-tns-c3-0 ng-star-inserted">
<div class="sb-item-body ng-trigger ng-trigger-expandBody" role="region" id="mdb-accordion-body-77"
aria-labelledby="mdb-accordion-head-77" style="height: 0px; visibility: hidden;">
<div class="card-body "></div>
</div>
</mdb-accordion-item-body>
</div>
Source Code:
<mdb-accordion-item class="no-collase" *ngFor="let route of areaRoutes">
<mdb-accordion-item-head routerLink="xxx" routerLinkActive="active"
href="#" [routerLinkActiveOptions]="{exact: true}" mdbWavesEffect>
<i class="{{route.data.icon}} xxx-icon-width"></i>
Team Member
</mdb-accordion-item-head>
<mdb-accordion-item-body></mdb-accordion-item-body>
Pictures: Before:
After:
Krause answered 6 years ago
I addet the following code to the components scss:
.side-nav .collapsible .card .card-header a h5 {
justify-content: normal !important;
}
That worked for me. Just dont know why it changed before.
Damian Gemza staff answered 6 years ago
Dear @Krause
I have tried to reproduce your problem but without success - for me icon and accordion heading text is close to each other.
I have used your code, so feel free to take a look at it:
.html:
<div class="container">
<div class="row">
<div class="col-md-12 mx-auto my-5">
<mdb-accordion [multiple]="false">
<mdb-accordion-item class="no-collase" *ngFor="let route of areaRoutes">
<mdb-accordion-item-head
routerLink="xxx"
routerLinkActive="active"
href="#"
[routerLinkActiveOptions]="{exact: true}"
mdbWavesEffect>
<i class="{{route.icon}}"></i>
Team Member
</mdb-accordion-item-head>
<mdb-accordion-item-body></mdb-accordion-item-body>
</mdb-accordion-item>
</mdb-accordion>
</div>
</div>
</div>
.ts:
areaRoutes = [
{icon: 'fas fa-user'},
{icon: 'fas fa-phone'},
{icon: 'fas fa-users'},
]
Also, please take a look at the screenshot from my Firefox (same behavior is presented on Chrome: https://screenshots.firefox.com/nCTJwjl2P6QZBWPf/localhost
Are you sure, that you're using the latest version of MDB Angular?
Also please check if one of your styles is not overwriting the default Accordion behavior.
Best Regards,
Damian
Krause commented 6 years ago
Hi Damian, thank you for your quick answer. Do you also have the justify-content-between in Firefox? I don't know where that comes from. I will also check other options.
Greetings
Damian Gemza staff commented 6 years ago
Yes, I've got mb-0 d-flex justify-content-between align-items-center
on <h5>
element on Firefox.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: 7.5.1
- Device: PC
- Browser: Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: No