Ionic-framework: Fab button should shift up when Toast is visible at bottom

[shyamal890]

Ionic version: (check one with "x")
[ ] 1.x (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 2.x
[x ] 3.x

I'm submitting a ... (check one with "x")
[ ] bug report
[ x] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
Currently if both the toast and Fab button at present at the bottom of the screen the Fab button gets covered by the toast. So lets, say a user saved something and wants to add a new item he has to wait for toast to go away.

Expected behavior:
Incase toast and fab button both are present at the bottom. Fab button should move up so that user can immediately click on button and move forward.

[AmitMY]

• Please fill in your ionic info information.

I think you want the toast to push the content when presenting it, however, that is not the native behaviour of iOS nor Android. (it seems like an overlay)

[davec21]

I'm with @AmitMY on this. The toast is an overlay not an element (if that makes sense). You could move your toast to drop down from the top, or just raise your fabs up a bit from the bottom.

[shyamal890]

Guys you need to have a look at Gmail/Yahoo or any similar apps. Delete an email and you will see Fab button shifting up for the toast. Very logical UX flow.

@AmitMY How will my Ionic Info help here?!!

[davec21]

Inbox does definitely shift the fab up.. never noticed before. Guess he has a bit of an argument.

[jgw96]

Hello everyone! Thanks for the feature request. I'm going to move this issue over to our internal list of feature requests for evaluation. We are continually prioritizing all requests that we receive with outstanding issues. We are extremely grateful for your feedback, but it may not always be our next priority. I'll copy the issue back to this repository when we have begun implementation. Thanks!

[jgw96]

This issue was moved to ionic-team/ionic-feature-requests#260

[AmitMY]

@shyamal890 I stand corrected.

Your ionic info helps on every issue.
From my experience with issues here, looking at an issue's version makes me understand if it is an old version, or there has been a regression, without comparing release dates.

[realappie]

According to the material design spec, the toast should push the fab up. Which is something the toast is not doing right now.

My ionic info

global packages:

    @ionic/cli-utils : 1.0.0-rc.2-alpha.f5850eb3
    Cordova CLI      : 6.5.0
    Ionic CLI        : 3.0.0-rc.2-alpha.f5850eb3

local packages:

    @ionic/app-scripts              : 1.3.12
    @ionic/cli-plugin-cordova       : 1.4.0-alpha.e838a5d7
    @ionic/cli-plugin-ionic-angular : 1.3.1-alpha.e838a5d7
    Cordova Platforms               : none
    Ionic Framework                 : ionic-angular 3.5.0

System:

    Node       : v6.9.5
    OS         : macOS Sierra
    Xcode      : Xcode 8.3.3 Build version 8E3004b
    ios-deploy : not installed
    ios-sim    : not installed

[shyamal890]

I guess this should be the first feature that they should implement in the next release. Hope they do so. If not, @jgw96 can you please share how to implement a tweak/hack for this?

[AmitMY]

Actually @shyamal890 I think this should be reopened as a bug report. @jgw96 what do you think?

[maumchaves]

I have implemented a temporary solution. It is an Angular / Ionic 3 directive that allows Ionic toasts to animate the fab buttons and other elements in the fixed-content div of a page accordingly.

All you have to do is to include the directive in your project and then add a corresponding element in your app component template:

Please check out the code here:
https://gist.github.com/maumchaves/d7270b54afd5c8ae120f34b41436a119

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.