How to create scroll list for only 30% of ion-content?

ionic-v1
1

Hello,

I wonder If I can fill ion-content 70% of height with static (not scrollable) elements like input form …
and only 30% of height create scrollable list with items.

this is my view:

 <ion-content scroll="false">   
      
            <label class="item item-input line-information">                   
                <div  class = "row-without-image">
                    <input class="wm-new-meeting-subject font-information" type="text" placeholder="Subject1" ng-model="details.title" > 
                </div>
           </label>
                 <label class="item item-input line-information">                   
                <div  class = "row-without-image">
                    <input class="wm-new-meeting-subject font-information" type="text" placeholder="Subject2" ng-model="details.title" > 
                </div>
           </label>
                 <label class="item item-input line-information">                 
                <div  class = "row-without-image">
                    <input class="wm-new-meeting-subject font-information" type="text" placeholder="Subject3" ng-model="details.title" > 
                </div>
           </label>
                 <label class="item item-input line-information">                   
                <div  class = "row-without-image">
                    <input class="wm-new-meeting-subject font-information" type="text" placeholder="Subject4" ng-4model="details.title" > 
                </div>
           </label>
                 <label class="item item-input line-information">                   
                <div  class = "row-without-image">
                    <input class="wm-new-meeting-subject font-information" type="text" placeholder="Subject5" ng-model="details.title" > 
                </div>
           </label>
      
      <ion-list style="height=100px">
        <ion-item ng-repeat="item in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17]" 
                  item="item"
                  href="#/item/{{item.id}}"
                  >  
           Item {{ item }} 
        </ion-item>
      </ion-list>

                 <div class="row" >
             <button class="button button-block button-stable ">
                 Cancel
             </button>
             <button class="button button-block button-stable ">
                 Set
             </button>
         </div> 
                 
    </ion-content>

The demo you can find HERE

The idea is to set ion-list height for example 300px to let to user to see bottom buttons without down scrolling.

How can achieve that?

2

It was dummy question :smile:

Use ion-scroll

Demo

2 Likes
3

Glad to see you got this :smile:

4

Ok but you can’t scroll the entire list on the bottom…

1 Like
5

Hey, I’m having the same problem. Did you find the solution?!

6

I found the solution.

The thing is, you NEED to set the ion-scroll height, but if you want it to have a relative height, like 90%, set it as 90vh since using % won’t work.

For those who doesn’t know vw and vh: https://css-tricks.com/viewport-sized-typography

7

When i use ion-scroll I get another scroll bar to the right of the scrollview