'How to make an angular page scrollable

I'm working on an Angular project in which I'm creating a form using the ionic-framework components.

<ion-content>
  <form>
    <ion-item lines="full">
      <ion-label position="floating">Name</ion-label>
      <ion-input type="text" required></ion-input>
    </ion-item>
    <ion-item lines="full">
      ...
    </ion-item>
      ...

    <!-- Radio buttons -->
    <ion-radio-group lines="full">
      <ion-item>
        <ion-label>Male</ion-label>
        <ion-radio slot="start" value="male" checked></ion-radio>
      </ion-item>
      <ion-item>
        <ion-label>Female</ion-label>
        <ion-radio slot="start" value="female"></ion-radio>
      </ion-item>
    </ion-radio-group>

    <!-- Checkboxes -->
    <ion-list lines="full">
      <ion-item>
        <ion-label>English</ion-label>
        <ion-checkbox></ion-checkbox>
      </ion-item>
      <ion-item>
        <ion-label>Maths</ion-label>
        <ion-checkbox></ion-checkbox>
      </ion-item>
    </ion-list>

    <ion-row>
      <ion-col>
        <ion-button type="submit" color="danger" expand="block">Submit</ion-button>
      </ion-col>
    </ion-row>

  </form>
</ion-content>

The issue is that I'm not able to scroll the content. I've already tried: <ion-content scroll="true"> but is not scrolling to the end, just mid-way. I also tried to put everything inside a div with overflow:auto and a fixed height but nothing seems to work.

How can I say Angular to enable scroll when content is overflowing? Shouldn't angular add a scrollbar automatically whenever the content exceed the page size?

htmlcssangularionic-frameworkionic4


Solution 1:[1]

You should wrap your data inside a tag has a defined height.

<ion-content>
<div style='height:100%;'>
<form>
....
</form>
</div>
</ion-content>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Zrelli Majdi

Related Questions