Ionic-framework: Texts disappear using slot=fixed in ion-content

[yordis]

Bug Report

Ionic version:


[x] 4.x

Current behavior:

Using slot="fixed" makes all my text to disappear except the texts inside the buttons.

Expected behavior:

The texts shouldn't desappear.

Steps to reproduce:

1. Create a page
2. Add the code snippet below
3. Notice that the content disappears

Related code:

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>
    <ion-title>Sign Up</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div slot="fixed">
    <div></div>
    <div class="sign-up-buttons">
      <ion-button size="large" color="primary">Sign up with Email</ion-button>
      <ion-button size="large" class="facebook-button">
        <ion-icon slot="start" name="logo-facebook"></ion-icon>
        Sign up with Facebook</ion-button
      >
      <ion-button fill="outline" size="large" color="dark">
        <ion-icon slot="start" name="logo-google"></ion-icon>
        Sign up with Google</ion-button
      >
      <ion-button margin-top fill="clear">
        Already have an account?<ion-text color="primary"
          >&nbsp; Log in</ion-text
        >
      </ion-button>
    </div>
    <div class="legal-links">
      <p>By signing up, you agree to our <br /></p>
      <p>
        <ion-button fill="clear">
          Terms of Service
        </ion-button>
        and
        <ion-button fill="clear">
          Privacy Policy
        </ion-button>
      </p>
    </div>
  </div>
</ion-content>

Other information:

Ionic info:

➜ ionic info

Ionic:

   ionic (Ionic CLI)             : 4.11.0 (/Users/ubi/.config/yarn/global/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.1.1
   @angular-devkit/build-angular : 0.13.5
   @angular-devkit/schematics    : 7.3.5
   @angular/cli                  : 7.3.5
   @ionic/angular-toolkit        : 1.4.0

System:

   NodeJS : v11.6.0 (/Users/ubi/.asdf/installs/nodejs/11.6.0/bin/node)
   npm    : 6.5.0-next.0
   OS     : macOS Mojave

[brandyscarney]

Thanks for the issue! I was able to reproduce this. It seems like adding position: relative to the p tags allows the text to show.

[wallstudios]

Not sure if I am trying to use this tag correctly or not.
if I use a grid with a left and right ion-col. I want to fix the content in the right col.

Using <div slot="fixed"></div>
inside the col hides the contents.

is this achievable using the tag?
I was using position fixed but that has its own issues and thought this might be the better way to go.

[matthewdenobrega]

@brandyscarney I've created a PR for this - to work without having to put extra styling on the content, the slot needs to be wrapped in a position:relative wrapper. There are notes on the PR.

[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.