CODEWITHSUNDEEP
htmlcssionic-framework
Aditya
Aditya

Reputation: 2536

How to prevent the lower content part of the page from cliiping on any mobile device

I am drawing an overlay on top of ionic page which starts right after where I have commented after the ion-content ends.

The problem I am facing is that the lower part where the arrow beigns is not visible on my device - moto x play. So how can a scroll bar automatically added or how can the overlay page be responsive ir fit on any height screen size?

I have drawn in the diagram the clipped part where the page ends.

enter image description here

.html

.ionic-overlay {
  .any-border {}
  .text1 {
    text-align: left;
    font-size: 24px;
    margin-top: 55px;
    margin-left: 15px;
  }
  .welcome-text2 {
    text-align: left;
    font-size: 20px;
    line-height: 23px;
    padding-top: 14px;
    margin-left: 15px;
  }
  .hello-text {
    margin-left: auto;
    margin-right: auto;
    padding-top: 90px;
    padding-bottom: 150px;
  }
  .middle-content {
    display: flex;
    justify-content: space-between;
    .find-name {
      margin-left: 15px;
    }
    .center-text {
      laign-self: flex-end;
      margin: auto 0;
    }
    .search {
      margin-right: 15px;
    }
  }
  
  .lower-page-content {
      display: flex;
      justify-content: space-between;
  }
  
  .lp-content1 {
    margin-left: 30px;
  }
  
  .lp-content2 {
    margin-right: 30px;
  }
  
}
<ion-header>
  <ion-toolbar>
    <ion-title></ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>

</ion-content>

<!-- main overlay part begins from here -->

<div class="ionic-overlay">

  <div class="any-border">
    <div></div>
  </div>
  <div class="text1">Text1</div>
  <div class="welcome-text2">Welcome text2</div>
  <div class="hello-text">Hello</div>

  <div class="middle-content">
    <div class="find-name">Find what is your name?</div>
    <div class="search">Seacrch<br>Name</div>

    <div class="center-text">Center text
      <div>

        <div class="middle-content1">
          <div class="find-name1">Find what is your name1?</div>
          <div class="search1">Seacrch<br>Name1</div>
        </div>

        <div class="lower-page-content">
          <div class="lp-content1"></div>
          <div class="lp-content2"></div>
          
         <!-- some more elements will come here -->
          

        </div>


      </div>

.css

Upvotes: 3

Views: 52

Answers (1)

inhaq
inhaq

Reputation: 356

  overflow-y: scroll;

Add this to your css file, this will add vertical scroll.

Upvotes: 3

Related Questions