Nested ion-fab & ion-fab-lists

Ionic Framework
1

Hello,
After I migrated from v3 to v4, ion-fab inside ion-fab with ion-fab-list no longer work.
Basicly what I want is to have a set of options open horizontally, after the fab-list which opens vertically

    <ion-fab horizontal="end">
        <ion-fab-button>Options</ion-fab-button>
        <ion-fab-list side="top">
            <ion-fab-button>Opt #1</ion-fab-button>
            <ion-fab-button>Opt #2</ion-fab-button>
            <ion-fab-button>Opt #3</ion-fab-button>
            <ion-fab>
                <ion-fab-button>Nested opt</ion-fab-button>
                <ion-fab-list side="start">
                    <ion-fab-button>Nested item #1</ion-fab-button>
                    <ion-fab-button>Nested item #2</ion-fab-button>
                    <ion-fab-button>Nested item #3</ion-fab-button>
                </ion-fab-list>
            </ion-fab>
        </ion-fab-list>
    </ion-fab>

Clicking the Options button will also open the Nested fab list, which is not desired. Any ideas on how to achive this is great appreciated :smiley:

2

Hello terrorb1ade,

Were you able to find any solution / alternative for your problem? I have started working on my ionic4 migration and ran into similar problem. Trying to see if you were able to find a solution for your problem.

Thanks!

3

Hi @terrorb1ade & @cbreddy , have you found any solution? I am working on a project to do exactly what @terrorb1ade described and have not found that anyone has solved for this. Help!? Thank you!

4

Hi @cbreddy & @winslowmike , I haven’t found a solution to the issue - the project I was working on is now on hold, so it’s no longer a priority for me. If I stumble upon a fix I’ll let you know here, it would be to have it working properly!
Cheers & Happy new year :smiley:

5

Hello @terrorb1ade & @winslowmike Thanks for getting back. I have taken a different approach to solve the problem and we are not going to need nested ion-fab / ion-fab-lists any more.

Thanks!