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.
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.
–> Tadaaaaaa
yeah. Just now i did after some research. Thanks bengtler
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>
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.
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
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)