Breaking change in mdb with mdbFixedCaption in Ver 9.0.1

Konrad Stępień staff commented 5 years 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.

itay pro commented 5 years 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 5 years 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.