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!
1 Like
I think you should have it fixed and not absolute.
It did, thanks! But that item moves when you scroll. I want it to stay there.
can you show some code? Position fixed should keep it static
makkart
November 6, 2014, 10:26pm
5
I got this working pretty well
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.
10 Likes
Thanks a lot, the trick was to put it outside content!
2 Likes
Came here to say - genius. Thanks!
anjum
March 13, 2015, 6:50am
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?
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*/
}
anjum
March 13, 2015, 5:36pm
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
Add a wrapper element and apply above styles to that adjust margin-right to half the width of the wrapper
anjum
March 14, 2015, 6:51pm
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
@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?
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;
}
1 Like
@Evil_Bug Do you mind sharing how you coded the transition slide effect when changing tabs?
1 Like
Has anyone been able to code that transition animation between tabs to show the desired shrink effect suggested by material design?
nylex
June 27, 2016, 6:50am
19
people seem to be too busy writing their applications lol… very often replies come.
Would appreciate that too!
thanks!
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 ?