Accordion Item Positioning changed after Update

Topic: Accordion Item Positioning changed after Update

Deloitte Developer free asked 4 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

Add comment

Deloitte Developer free answered 4 years ago

0 0 Best answer

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.

Add comment

Damian Gemza staff answered 4 years ago

0 0 Best answer

<p>Dear <a href="/profile/?id=54206" target="_blank" rel="nofollow">@Krause</a></p>

<p>I have tried to reproduce your problem but without success - for me icon and accordion heading text is close to each other.</p>

<pre class="prettyprint"><code><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>
</code></pre>

<pre class="prettyprint"><code> areaRoutes = [
    {icon: 'fas fa-user'},
    {icon: 'fas fa-phone'},
    {icon: 'fas fa-users'},
  ]
</code></pre>

<p>Also, please take a look at the screenshot from my Firefox (same behavior is presented on Chrome: <a href="https://screenshots.firefox.com/nCTJwjl2P6QZBWPf/localhost" target="_blank" rel="nofollow">https://screenshots.firefox.com/nCTJwjl2P6QZBWPf/localhost</a></p>

<p>Are you sure, that you're using the latest version of MDB Angular?</p>

<p>Also please check if one of your styles is not overwriting the default Accordion behavior.</p>

<p>Best Regards,</p>

<p>Damian</p>

Please insert min. 20 characters.

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

Deloitte Developer free commented 4 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 4 years ago

Yes, I've got mb-0 d-flex justify-content-between align-items-center on <h5> element on Firefox.

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

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

Deloitte Developer

32Support score
3Questions 1Answers 0Snippets