I am trying to create an overlay on top of an Ionic page that should appear right after the ion-content section.
However, I am encountering an issue where the lower part of the overlay, where an arrow starts, is not visible on my Moto X Play device. How can I automatically add a scroll bar or make the overlay page responsive to fit any screen size?
I have marked the clipped area where the page ends in the diagram below.
.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>