Material Design floating action button, z-index problem


#1

Hi, I am trying to add to my interface a Floating Action Button following Googles Material Design specs.
http://www.google.com/design/spec/components/buttons.html#buttons-floating-action-button

I place the html on the content and on the css I position it absolute and give it a very hight z-index but it just doesn’t work.

There is an ion-scroll div thats position relative plus if I place any component it just appear ontop of it.

Is there a way to generate this jind of button and keep it always on the lower right corner of the screen ontop of any other element?

Thanks!


#2

I think you should have it fixed and not absolute.


#3

It did, thanks! But that item moves when you scroll. I want it to stay there.


Fix button on bottom inside ion content
#4

can you show some code? Position fixed should keep it static


#5

I got this working pretty well
This is what I’ve done:

Put this markup OUTSIDE of the ion-content. !important

<div class="float-button">
  <span class="height-fix">
    <a ui-sref="add-trip" class="content">
      <i class="ion-plus-round"> </i>
    </a>
  </span>
</div>

Then use this CSS:

.float-button {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  width: 30px;
  padding: 30px;
  font-size: 40px;
  background: $warning;
  position: fixed;
  bottom: 20px; /* Adjust to where you want it */
  right: 20px; /* Adjust to where you want it */
  z-index: 9999;
}

.float-button .height_fix {
  margin-top: 100%;
}

.float-button .content {
  position: absolute;
  left: 0;
  top: 50%;
  height: 100%;
  width: 100%;
  text-align: center;
  margin-top: -20px; /* Note, this must be half the font size */
  color: $light;
}

I hope it helps.


#6

Thanks a lot, the trick was to put it outside content! :slight_smile: thanks!


#7

Came here to say - genius. Thanks!


#8

This was very nice and helpful.Thank you so much!

Can you please tell me what should I do, if I wish to center align the floating button on the screen?


#9

Could be wrong now cause I don’t have time to test but something like this

.float-button {
  right: 50%;
  margin-right: -15px; /* Half the width of the button*/
}

#10

Thanks @makkart for your quick turn around. Actually it’s a bit different. I do not want to center align a single icon. I am creating a floating toolbar with 4-5 icons, and wish to center align the whole toolbar. Any ideas?

Regards


#11

Add a wrapper element and apply above styles to that adjust margin-right to half the width of the wrapper


#12

I earlier tried to wrap it in

as well as without success. But I didn’t apply the styles on wrapper. Will try this and see if it works. Thanks for your support.

Regards


#13

@makkart I’m trying to implement your button in my app but I´m using tabs so in ios the taps is down and in android is up near to the header so the position of the button not change in different platform what can i do?


#14

The HTML is prefixed with a platform tag so you could do something like this. Could be simplified im sure.

.platform-android .float-button {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  width: 30px;
  padding: 30px;
  font-size: 30px;
  background: $assertive;
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
}

.platform-ios .float-button {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  width: 30px;
  padding: 30px;
  font-size: 30px;
  background: $assertive;
  position: absolute;
  bottom: 60px;
  right: 20px;
  z-index: 9999;
}

#15

Sweet! Thanks a lot man!


#16

Nice work.:santa: I have implemented your button inside slide-box tabs and works fine, but when switching between tabs the button is dragged too in horizontal direction with the rest of the content. How could be fixed ?

Example of the issue:

Desired solution (like material design suggest):


#17

@Evil_Bug Do you mind sharing how you coded the transition slide effect when changing tabs?


#18

Has anyone been able to code that transition animation between tabs to show the desired shrink effect suggested by material design?


#19

people seem to be too busy writing their applications lol… very often replies come.


#20

Would appreciate that too!