How to split screen into two parts in ionic?


#1

Hello all,

I am new to IONIC. I am trying to make screen into two parts. One should be constant with card and other should be scroll able list like below image. Please do the needful.

Thanks,
Sandeep.

https://lh3.googleusercontent.com/5n0U7ZM_nr2RSJHmDsslXa8XgfcYWlsjNehnNKelYL5647P8z_bO_lJUjWNzfd5n1Q=h900-rw


#2
  1. calculate the visible content height --> to separate in two parts --> calculatedHeight/2
  2. set the ionic content scroll=“false”
  3. add a div that holds the image --> set the fixed calculated height
  4. add ionScroll with calculated fixed height

–> Tadaaaaaa


#3

yeah. Just now i did after some research. Thanks bengtler


#4

Hi @bengtler

Its working good but i am not able to align text in the middle. Here is the my template code.

<ion-content class="" scroll="false"> <a class="card item" style="height: 40%;background: seagreen;text-align: center; width: auto;"> <h1 class="row row-center" style="color: whitesmoke;">JOBS</h1> <p class="row row-center" style="color: whitesmoke;">Tech vacancies in your pocket.</p> </a> <ion-scroll direction="y"> <div class="card waves-effect waves-green waves-green" style="background:gray" ng-click="todayJobs();"> <a class="item item-avatar waves-effect waves-block waves-dark in done item-text-wrap"> <span class="avatar" style="background-image: url('../../../../../img/app/homePageJobsBackground.jpg');"></span> <h2 style="color:whitesmoke">Today Jobs</h2> <p style="color:black">Discover all jobs in india.</p> </a> </div> </ion-scroll> </ion-content>


#5

there is no need to add inline style for centering text --> ionic provides predfined css-classes like “text-center”

maybe you can make a little codepen.


#6

It is aligning to center. My problem is i am not able to align in the middle. In the above code, Jobs heading and paragraph is aligning to top center of card. I want to align in the middle


#7

ionic provides mixins for flexbox usage, if you are using scss
Explaination:
https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/

Ionic mixins (search for flex)

So you could create scss classes like

.vertical-center {
  @include display-flex;
  @include justify-conten(center);
  @include align-items(center);
}

and your html:

<a class="card item vertical-center" style="height: 40%;background: seagreen;width: auto;">
  <h1 class="row row-center" style="color: whitesmoke;">JOBS</h1>
  <p class="row row-center" style="color: whitesmoke;">Tech vacancies in your pocket.</p>
</a>

or something like this. (not tested)