Responsive Grid Layout and Scrolling problem <<CodePen>>

ionic-v1
1

Hi, I’m in trouble with two probems.

I want to create a page with two columns - vertical grid in Portrait and Horizontal grid in Landscape

Please refer this codepen first: CodePen

[Problem1 : Scrolling on ion-scroll]

I’m a kind of new in CSS, I can’t solve why ion-scroll doesn’t scroll down

[Problem2: Responsive Grid Column]

<div class="row responsive-sm">
  <div class='col col-50"> </div>
  <div class='col col-50"> </div>
</div>

it looks working fine

<div class="row responsive-sm">
  <div class='col col-75"> </div>
  <div class='col col-25"> </div>
</div>

it works great too. but something between 50 and 75 for example col-60 and col-40 - this doesn’t work it always displays 50:50 ratio

2

Problem1: You need to set the height of the ionScroll, from the docs:

Note that it’s important to set the height of the scroll box as well as the height of the inner content to enable scrolling. This makes it possible to have full control over scrollable areas.

If you don’t want to do it that way you can mess around with absolute positioning but that will require some css.

Problem2: That’s because those classes don’t exist. The docs show the available explicit col sizes:

Explicit Column Percentage Classnames
.col-10 - 10%
.col-20 - 20%
.col-25 - 25%
.col-33 - 33.3333%
.col-50 - 50%
.col-67 - 66.6666%
.col-75 - 75%
.col-80 - 80%
.col-90 - 90%

If you wanted to use col-40 and col-60 you could create these classes.

3

Thank you for the link. I’ll look into it