Materialize: Card FAB hidden when specifying card size

[pedro-poblete]

Description

When specifying card size (card small, medium, large) and adding a FAB to it, the FAB is hidden by the card content.

Repro Steps

Create a card, define any size, add a FAB button.

Demonstration of the issue here: https://jsfiddle.net/w9w0db9p/2/

Screenshots / Codepen

See the JSfiddle

[Dean-kasail]

it's due to this class, when you turn of the overflow hidden it is fixed

line 4740

.card.small .card-image, .card.medium .card-image, .card.large .card-image {
    max-height: 60%;
    overflow: hidden;
}

[Dean-kasail]

Solution i have found is move the FAB to its own div .card-fab

Markup

<div class="col s12 m6 l4">
          <div class="card">
            <div class="card-image">
        <img src="image.png">
    </div>
    <div class="card-fab">
        <a href="#" class="btn-floating halfway-fab waves-effect waves-light" title="LEARN MORE">
                     <i class="zmdi zmdi-arrow-right"></i>
                  </a>
    </div>
        <div class="card-content">
        <span class="card-title">Card Title</span>
        <p>Some text</p>
    </div>
    <div class="card-action center">
        <a href="#" class="waves-effect waves-light btn">
                      <i class="zmdi zmdi-email"></i> contact
                </a>
        </div>
   </div>
</div>

CSS

.card-fab {
    position: relative;
    z-index: 1;
}

because of the new div another rule needs to be amended, as the .card-content may not follow the .card-image

.card.small .card-image + .card-content,
.card.medium .card-image + .card-content,
.card.large .card-image + .card-content,
.card.small .card-image + .card-fab + .card-content,
.card.medium .card-image + .card-fab +.card-content,
.card.large .card-image + .card-fab + .card-content {
  max-height: 40%;
}

[thewhiteh4t]

@Dean-kasail This solution is not working is there any other work around for this?

[carlostighe]

Having same issue.

Okay Im using card large so what fixed it for me was switching the overflow from hidden to inherit.
I have nothing in card content either (this might solve it for me but cause issues with others.)

.card.large .card-image {
    max-height: 60%;
    overflow: inherit;
}

I also had to set a min image height

.card-image{
  min-height: 300px;
}