# FAB button not showing properly on iPhone

**URL:** <https://forum.ionicframework.com/t/fab-button-not-showing-properly-on-iphone/56374>\
**Category:** ionic-v3\
**Created:** [July 1, 2016, 8:31am UTC](https://forum.ionicframework.com/t/fab-button-not-showing-properly-on-iphone/56374 "2016-07-01T08:31:31Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![JonathanPeel](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/jonathanpeel/32/101236_2.png) [@JonathanPeel](https://forum.ionicframework.com/u/JonathanPeel)\
**Post date:** [July 1, 2016, 8:31am UTC](https://forum.ionicframework.com/t/fab-button-not-showing-properly-on-iphone/56374/1 "2016-07-01T08:31:31Z")

</div>

Hi, I am trying to add a FAB button to a view, but it does not show as I expect it, when running on my phone.

I _think_ my markup is correct.

Thank you, to anyone who might be able to advise.

My Code:  
\<ion-content\>  
\<ion-list\>  
…  
\</ion-list\>  
\<button fab fab-bottom fab-right fab-fixed primary\* ngIf= “register.addFields”(click) = “openAdd()” \>  
\<ion-icon name=“add” \>\</ion-icon\>  
\</button\>  
\</ion-content\>

Chrome Screenshot:  
 ![image](https://global.discourse-cdn.com/ionicframework/original/3X/9/8/981767c7a92d6c05d6a3a986cbcdc788761657a1.png)

iPhone screenshot:

 ![image](https://global.discourse-cdn.com/ionicframework/original/3X/a/0/a04041bca3787e36ca34d7ad8318d5e3084fec86.PNG)

---

<div class="post-metadata">

**Author:** ![tuongaz](https://avatars.discourse-cdn.com/v4/letter/t/2acd7d/32.png) [@tuongaz](https://forum.ionicframework.com/u/tuongaz)\
**Post date:** [July 1, 2016, 11:20am UTC](https://forum.ionicframework.com/t/fab-button-not-showing-properly-on-iphone/56374/2 "2016-07-01T11:20:30Z")

</div>

Dont need to have fab-fixed, also, put the button outside of the ion-content

---

<div class="post-metadata">

**Author:** ![JonathanPeel](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/jonathanpeel/32/101236_2.png) [@JonathanPeel](https://forum.ionicframework.com/u/JonathanPeel)\
**Post date:** [July 1, 2016, 2:35pm UTC](https://forum.ionicframework.com/t/fab-button-not-showing-properly-on-iphone/56374/3 "2016-07-01T14:35:02Z")

</div>

Hi.  
I tried taking it out of the _content_. before the list loads, the button is visible. Once the list is loaded, the button disappears.  
I am guessing that it is getting pushed out.

---

<div class="post-metadata">

**Author:** ![nylex](https://avatars.discourse-cdn.com/v4/letter/n/7ab992/32.png) [@nylex](https://forum.ionicframework.com/u/nylex)\
**Post date:** [July 2, 2016, 8:59am UTC](https://forum.ionicframework.com/t/fab-button-not-showing-properly-on-iphone/56374/4 "2016-07-02T08:59:41Z")

</div>

I have the same issue with fab button. It works fine for android, i was thinking to remove fab from ios since fab is on material design.

---

<div class="post-metadata">

**Author:** ![JonathanPeel](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/jonathanpeel/32/101236_2.png) [@JonathanPeel](https://forum.ionicframework.com/u/JonathanPeel)\
**Post date:** [July 2, 2016, 10:04am UTC](https://forum.ionicframework.com/t/fab-button-not-showing-properly-on-iphone/56374/5 "2016-07-02T10:04:58Z")

</div>

I ended up putting a plus on the Nav bar, and I think it looks alright.

Setting it to use the Fab on Android only is actually not a bad idea.

Thank you.