question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Ion-fab show behind the toolbar

See original GitHub issue

Bug Report

[x] 4.0 BETA 19

Current behavior: Afer Beta 18 the ion-fab is showed behind the toolbar.

image

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:closed
  • Created 5 years ago
  • Reactions:3
  • Comments:29 (13 by maintainers)

github_iconTop GitHub Comments

3reactions
brandyscarneycommented, Dec 17, 2018

@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!

2reactions
brandyscarneycommented, Jan 9, 2019

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:

ion-content {
  contain: size style;
}

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!

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found