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.

content inside ion-content does not appear on screen using ionic 4 via CDN

See original GitHub issue

Ionic version: 4.x

I’m submitting a … bug report

Current behavior:

ion-content is not displaying the components within. So while <ion-button>button</ion-button> might work <ion-content><ion-button>button</ion-button></ion-content> doesn’t display.

Inspecting the components reveals that the components inside ion-content does render but maybe due to a css issue they don’t display on screen.

here are some examples of the current behavior: https://stackblitz.com/edit/js-ypm733 https://glitch.com/edit/#!/neighborly-bison?path=views/index.html:54:5

locally:

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
</head>

<body>
  <ion-header>
    <ion-toolbar>
      <ion-title>Toolbar</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>

    <ion-card>
      <ion-card-header>
        Header
      </ion-card-header>
      <ion-card-content>
        The British use the term "header", but the American term "head-shot" the English simply refuse to adopt.
      </ion-card-content>
    </ion-card>

  </ion-content>

  <ion-footer>
    <ion-toolbar>
      <ion-title>Footer</ion-title>
    </ion-toolbar>
  </ion-footer>
  <script src="https://unpkg.com/@ionic/core@4.0.0-alpha.4/dist/ionic.js"></script>
</body>

</html>

Expected behavior:

expected behaivor is that the components within ion-content display.

Steps to reproduce:

adding ionic core via the CDN<script src="https://unpkg.com/@ionic/core@4.0.0-alpha.4/dist/ionic.js"></script>

Other information:

It seems to work fine when using the ionic pwa toolkit .

Issue Analytics

State:
Created 5 years ago
Comments:7

Top GitHub Comments

2reactions

sntrancommented, May 6, 2018

I see the same issue, and here is what I have found out:

You need to wrap everything with <ion-app>.
If you use <ion-page>, it won’t have a height. You need to use an element with class ion-page instead. This is probably a bug. It sets flex: 1 to that element to make it take the remaining space.

0reactions

ionitron-bot[bot]commented, Sep 12, 2018

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.