Breaking change in mdb with mdbFixedCaption in Ver 9.0.1

web
mobile

Topic: Breaking change in mdb with mdbFixedCaption in Ver 9.0.1

itay pro asked 3 months ago

Expected behavior

fixed caption to appear

Actual behavior

fixed caption stopped appearing

After investigating, it turns out that the button <a> container is missing oveflow:visible

Here is a code snippet

    <a mdbBtn floating="true" color="yellow" mdbFixedCaption="XXX" [collapseButton]="button" class="waves-light" [routerLink]="XXX" mdbWavesEffect>
      <i class="fa fa-pencil-alt"></i>
    </a>

Adding the following to the component's scss file restored the caption:

a {
  overflow: visible;
}

Resources (screenshots, code snippets etc.)

Before - https://imgur.com/a/bFy1QtD

After - https://imgur.com/83Yx67M


Konrad Stępień staff commented 3 months ago

Hi @itay,

I don't have a problem with your code.

Are you sure, that you don't override styles of a tag? Please check It in dev tools.

example


itay pro commented 3 months ago

I had to override overflow: visible of .btn-floating before so that labels will appear.

However, starting now, my overflow: visible was overridden by you so I now need to add !important to it.

.btn-floating {
  vertical-align: middle;
  overflow: visible !important;

  p {
    position: absolute;
    right: 60px;
    top: 10px;
    background: #000;
    color: #fff;
    border-radius: .25rem;
    padding: .25rem .5rem;
    white-space: nowrap;
  }
}

This is what happens in dev tools

https://imgur.com/a/ruIi0qR

P.S. how do you embed an image ?


Konrad Stępień staff commented 3 months ago

Thanks for the reply.

I found line this style but line with overflow: hidden was change 2 years ago.

Also, for me this code works correctly:

<div class="fixed-action-btn" style="bottom: 45px; right: 24px;">

  <a mdbBtn floating="true" size="lg" color="red" class="waves-light" #button mdbWavesEffect (click)="fixed.toggle()">
    <mdb-icon fas icon="pencil-alt"></mdb-icon>
  </a>

  <div class="fixed_collapse" mdbCollapse="isCollapsed" #fixed>
    <a mdbFixedCaption="Caption 1 Caption 1 Caption 1" [collapseButton]="button" mdbBtn floating="true" color="red" class="waves-light" mdbWavesEffect><mdb-icon fas icon="star"></mdb-icon></a>
    <a mdbFixedCaption="Caption 2" [collapseButton]="button" mdbBtn floating="true" color="yellow" class="darken-1 waves-light" mdbWavesEffect><mdb-icon fas icon="user"></mdb-icon></a>
    <a mdbFixedCaption="Caption 3 Caption 3" [collapseButton]="button" mdbBtn floating="true" color="green" class="waves-light" mdbWavesEffect><mdb-icon fas icon="envelope"></mdb-icon></a>
    <a mdbFixedCaption="Caption 1" [collapseButton]="button" mdbBtn floating="true" color="blue" class="waves-light" mdbWavesEffect><mdb-icon fas icon="shopping-cart"></mdb-icon></a>
    <a mdbFixedCaption="XXX" [collapseButton]="button" mdbBtn floating="true" color="yellow" class="waves-light" mdbWavesEffect><i class="fa fa-pencil-alt"></i></a>
  </div>

</div>

Is there any way to reproduce this problem?

Could you make a new simple project, install MDB and then try to test my code?

Best, Konrad.


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: Angular
  • MDB Version: 9.0.1
  • Device: NA
  • Browser: NA
  • OS: NA
  • Provided sample code: No
  • Provided link: Yes