CODEWITHSUNDEEP
ionic-frameworkionic2floating-action-button
Meysam
Meysam

Reputation: 18137

How to place the fab button on the edge of a div?

On the top of the page, I’ve got a div for which background image has been set. I want to place the fab button on the bottom right edge of this div. Exactly like the following image. How can I do this?

enter image description here

Upvotes: 4

Views: 15389

Answers (3)

Meysam
Meysam

Reputation: 18137

Thanks to @Garrett and @Gabriel, I got it working using the following markup and scss. It's important to place the FAB button inside the div to which we want to assign the background image so that we can use relative positioning:

<ion-content>

  <div id="header">
    <ion-fab bottom right edge>
      <button ion-fab><ion-icon name="camera"></ion-icon></button>
    </ion-fab>
  </div>

</ion-content>

And the scss file:

#header {
  background-image: url('../assets/images/anonymous.jpg')!important;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  height: 25vh;
}

ion-fab {
  position: relative;
}

ion-fab[bottom][edge] {
  bottom: -21vh;
}

.fab {
  margin-right: 3vw;
}

Upvotes: 3

Gabriel Barreto
Gabriel Barreto

Reputation: 6421

Just use the edge attribute that comes along with fabs:

<ion-fab bottom right edge>
  <button ion-fab><ion-icon name="camera"></ion-icon></button>
</ion-fab>

For this to work the div (or any tag) having the fab inside must have position set to relative, absolute or fixed to work, position: inherit may work too depending on parent positioning.

Hope this helps.

Upvotes: 7

Garrett Barlocker
Garrett Barlocker

Reputation: 703

Here is what I could get to work. This works by creating a fab-container that is going to overlay the main container on this page. For this to work you need to know their heights. Then we make the fab-container z-index of 1 to be on top. Then we can use flex to make the fab be in the bottom right. Then we can add a margin-top half the size of the fab to the fab-container to have the fab hover halfway in-between. Lastly we can add margin-right to get the fab off the right side.

This may not be the best way to do it, since it requires knowing the height of your container, but it was the way that I would approach this task.

<ion-content>
    <div class="container"></div>
    <div class="fab-conatainer">
        <ion-fab class="fab">
            <button ion-fab>
                <ion-icon name="camera"></ion-icon>
            </button>
        </ion-fab>
    </div>
    <div class="contacts-container">
        <ion-list>
            <ion-item>
                <ion-input placeholder="Name"></ion-input>
            </ion-item>
            <ion-item>
                <ion-input placeholder="Phone"></ion-input>
            </ion-item>
            <ion-item>
                <ion-input placeholder="Email"></ion-input>
            </ion-item>
       </ion-list>
    </div>
</ion-content>

CSS

  .container {
   width: 100%;
   background: #333;
   height: 500px;
 }

 .fab-conatainer {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 500px;
  z-index: 1;
  margin-top: 28px;
 }

 .fab {
  margin-right: 14px;
 }

Upvotes: 1

Related Questions