Accordion Item Positioning changed after Update


Topic: Accordion Item Positioning changed after Update

Krause asked 6 years ago

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

After: enter image description here


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.


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue
  • 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