CODEWITHSUNDEEP
ionic-frameworkionic4
Telmo Trooper
Telmo Trooper

Reputation: 5694

ion-content won't show when using Ionic core 4

I'm developing an app that uses Vue.js and Ionic, but I can't figure it out why updating my Ionic core version breaks the ion-content tag, I tried googling if the tag was discontinued, but it doesn't seem to be the case.

To illustrate, I've made a example that uses Ionic core. With the latest Ionic version the ion-content tag doesn't show up, but if you switch to the older Ionic version, then it shows just fine.

<head>
    <meta charset="UTF-8">
    <title>Ionic Test</title>
    <script src="https://unpkg.com/@ionic/core@latest/dist/ionic.js"></script>
    <!-- <script src="https://unpkg.com/@ionic/[email protected]/dist/ionic.js"></script> -->
</head>
<body>
    <ion-app>
        <ion-page>
        <ion-header>
            <ion-toolbar>
            <ion-title>Example</ion-title>
            </ion-toolbar>
        </ion-header>
        <ion-content class="content" padding>
            <ion-list>
                </ion-item>
                    <ion-label full>I'm an example text...</ion-label>
                    <ion-button>Example button</ion-button>
                </ion-item>
            </ion-list>
        </ion-content>
        </ion-page>
    </ion-app>
</body>

Here's a jsFiddle for this code: https://jsfiddle.net/telmo/chk9h080/

Can someone explain to me what is happening here?

Upvotes: 4

Views: 3460

Answers (2)

Niki Mehta
Niki Mehta

Reputation: 11

Actually There is some height problem,so import css and write this code

......

css .height{ height:100vh }

It will solve your error

Upvotes: 0

ghybs
ghybs

Reputation: 53280

Since @ionic/core (aka Ionic4) version 0.0.4, there is no more <ion-page>. You directly put your header and content under the <ion-app>.

If really necessary, you can wrap them in a <div class="ion-page">.

Upvotes: 7

Related Questions