Ion-fab show behind the toolbar
See original GitHub issueBug Report
[x] 4.0 BETA 19
Current behavior: Afer Beta 18 the ion-fab is showed behind the toolbar.
Expected behavior: The fab button should appear above the toolbar like previous versions.
Related code:
<ion-header no-border>
<ion-toolbar color="primary">
<ion-title> <img src="assets/imgs/dark.svg" height="46" /> </ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-fab vertical="top" horizontal="end" edge slot="fixed">
<ion-fab-button color="tertiary" (click)="navigateToEditProfile(profileId)">
<ion-icon name="create"></ion-icon>
</ion-fab-button>
</ion-fab>
<ion-list-header color="secondary" no-margin>
<ion-label>
<h1 text-uppercase>PERFIL</h1>
</ion-label>
</ion-list-header>
<div>....</div>
</ion-content>
Ionic info:
Ionic:
ionic (Ionic CLI) : 4.5.0 (/Users/xxx/.nvm/versions/node/v10.14.1/lib/node_modules/ionic)
Ionic Framework : @ionic/angular 4.0.0-beta.19
@angular-devkit/build-angular : 0.11.3
@angular-devkit/schematics : 7.1.3
@angular/cli : 7.1.3
@ionic/angular-toolkit : 1.2.0
Cordova:
cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
Cordova Platforms : none
Cordova Plugins : no whitelisted plugins (0 plugins total)
System:
NodeJS : v10.14.1 (/Users/xxx/.nvm/versions/node/v10.14.1/bin/node)
npm : 6.5.0
OS : macOS Mojave
Xcode : Xcode 9.4 Build version 9F1027a
Issue Analytics
- State:
- Created 5 years ago
- Reactions:3
- Comments:29 (13 by maintainers)
Top Results From Across the Web
Fab button behind toolbar - Ionic Angular
Hi folks, I have the same problem as described in Ion-fab show behind the toolbar · Issue #16780 · ionic-team/ionic-framework · GitHub Ionic ......
Read more >ion-fab in ion-footer always under ion-content - Stack Overflow
As Ion-footer always stay in bottom of the screen after ion-content so it will always show like this if you want it above...
Read more >Floating action button - Panel - HoloViz Discourse
Based in the comment Panel running on iPad, I was exploring the ionic framework. For the record, there is the possibility of using...
Read more >Ionic FAB Button - javatpoint
The FAB buttons are shaped like a circle. We can access the floating action button by using a standard <ion-fab> component. The idea...
Read more >Understanding How Slots are Used in Ionic 4 | Josh Morony
The basic idea behind Ionic's components are not changing – you just plop a custom ... <ion-toolbar> <ion-buttons slot="end"></ion-buttons> ...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@paulstelzer Thanks! Apparently I needed to relaunch Chrome to update it, so I can now reproduce it in latest Chrome. This helps narrow the problem down!
For v4 we plan to have it in for final, this issue is being tracked in the project board as top priority: https://github.com/ionic-team/ionic/projects/3 and the RC tracking issue: https://github.com/ionic-team/ionic/issues/16819.
v3 will likely take a bit longer to get a fix out as we will need to review our scripts to ensure nothing breaks.
In the meantime the following workaround should work for both versions:
Updated the earlier codepen to include this: https://codepen.io/brandyscarney/pen/KbgKNw
I’m not sure if there are any negative side effects from this as we have not started testing it yet. If anyone would like to throw that CSS in their app and report any bugs they see, that would be helpful. Thanks!