CODEWITHSUNDEEP
htmlcssionic-frameworkionic4web-component
Keyvan
Keyvan

Reputation: 873

Ionic 4 wrong height for ion-header and ion-footer when inside div

I want to render some ionic components at the corner of a page, so I'm puting them inside a div with fixed position. Here's a sample code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>title</title>
    <script type="module" src="https://unpkg.com/@ionic/core@latest/dist/ionic/ionic.esm.js"></script>
    <script nomodule src="https://unpkg.com/@ionic/core@latest/dist/ionic/ionic.js"></script>
    <link href="https://unpkg.com/@ionic/core@latest/css/ionic.bundle.css" rel="stylesheet">
    <style>
      .container {
        position: fixed;
        bottom: 10em;
        right: 2em;
        width: 30%;
        height: 30%;
        box-shadow: 0 0 0 1em;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <ion-header>
        <ion-toolbar color="primary">
          <ion-title>Header</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content>
        <ion-list color=danger>
          <ion-item color="secondary">Here</ion-item>
          <ion-item color="tertiary">Some</ion-item>
          <ion-item color="success">Content</ion-item>
        </ion-list>
      </ion-content>
      <ion-footer>
        <ion-item color="warning">Footer</ion-item>
      </ion-footer>
    </div>
  </body>
</html>

The behavior I'm getting (div bounds shown in black):

With header and footer

When I remove ion-header and ion-footer:

Without header and footer

Think there's a bug in height calculation (closest issue).

I was hoping to reuse the header/footer logic, my content is scrollable in between.

Is there a workaround for this?

Any other web-component framework that implements this feature?

Upvotes: 1

Views: 1833

Answers (1)

Keyvan
Keyvan

Reputation: 873

Found a CSS solution, maybe not perfect, but works fine. First we find the clientHeight of header (56px) and footer (48px), then:

<ion-content class="content">

.content {
  height: calc(100% - 56px - 48px)
}

Result:

result

Upvotes: 1

Related Questions