Ion-list inside card


#1

i want to show a scroll ion-list inside a card …
my code

            <div class="card xcard2">
            <div class="mycardheader">
                <h2>Drivers</h2>
            </div>
<content >
            <ion-list class="lis">
                <ion-item ng-repeat="driver in drivers" >
                         <h2> {{driver.driver_name}} </h2>
                                      </ion-item>
            </ion-list>
            </content>
        </div>

the list shown but i cant scroll the list to see more items … any help ?


How can I constrain the height of an <ion-list> [RESOLVED]
#2

You could wrap the list in an ion-scroll and set the height of the scroll to that of it’s container, then wrap the card so it will take up the height of the content:

<ion-content scroll="false">
  <div class="card-wrapper">
    <div class="card custom-card">
      <ion-scroll>
        <ion-list>
          <ion-item ng-repeat="item in items" class="padding">
            Item {{ item }}
          </ion-item>
        </ion-list>
      </ion-scroll>
    </div>
  </div>
</ion-content>

CSS:

.card-wrapper {
  height: 100%;
  padding: 20px 10px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.custom-card.card {
  height: 100%;
  margin: 0;
}

.scroll-view {
  height: 100%;
}

Codepen demo

You could also set card-wrapper to a pixel height.


#3

@brandyshea thanks alot, this fix 50% of the problem :blush:, but the other 50% is … i need to put multiple cards in the same view one beside the other with deferent heights, any help ?


#4

Do you have any mockups or sample apps so I can visualize it? Or maybe a codepen of what you have so far? Easier to help with more details. :smile:


#5

@brandyshea , i find the wrong part in my code, thanks alot for your fast reply :slight_smile:


#6

@brandyshea, seem i got something wrong when am using 2 card wrapper with scroll list in each one, the code below

   <div class="card-wrapper1">
        <div class="card xcard1">
            <div class="item item-divider mycardheader">
                <h2>
          header
            </h2>
            </div>
            <ion-scroll class="xcard1scroll">
                <ion-list class="list">
                    <ion-item class="orderitem" ng-repeat="morder in localOrders">
                  
                        <ion-option-button class="button xdelivery" ng-if="morder.order_status == 2" ng-click="showDriversToSelect(morder.order_md5)">
                        </ion-option-button>
                        <div ng-click="showOrderDetails(morder.order_md5)">
        {{driversName[morder.driver_id]}}
                        </div>
                    </ion-item>
                </ion-list>
            </ion-scroll>
        </div>
    </div>

    <div class="card-wrapper2">
        <div class="card xcard2">
            <div class="item item-divider mycardheader">
                <h2>header2 </h2>
            </div>
            <ion-scroll class="xcard2scroll">
                <ion-list class="list">
                    <ion-item ng-repeat="mdriver in drivers" class="driveritem">
                        <ion-option-button class="button xcall" ng-click="dialNumber(mdriver.driver_mobile)">
                        </ion-option-button>
                       
                        <div class="catnamediv">
                            <h2> {{mdriver.driver_name}} </h2>
                           
                        </div>
                    </ion-item>
                </ion-list>
            </ion-scroll>
        </div>
    </div>

and the CSS is

    .card-wrapper2 {
  height: 45%;
  padding: 20px 10px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
       width: 99%;
    position: absolute;

}

.xcard2scroll {
  height: 85%;
}

.xcard2 {
    float: left;
    height: 100%;
    width: 48%;
    overflow: hidden;
/*    margin: 0px;*/
    margin: 20px 10px;
    border-radius: 8px !important;
    background-color: #fff;
}

.card-wrapper1 {
  height: 97%;
  padding: 20px 10px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

    width: 99%;
    position: absolute;
}

.xcard1scroll {
  height: 95%;
}

.xcard1 {
    float: right;
    height: 100%;
    width: 51%;
    overflow: hidden;
    margin: 20px 10px;
    border-radius: 8px !important;
    background-color: #fff;
}

the card wrappers seem to overlaped when try to scroll the right one … the card1

any help ?


#7

Could you modify the codepen to show this? It’s easier to help that way.


#8

@brandyshea

try this one

try to scroll the right list from lower part and from upper part, from lower everything ok , from upper not working, also try the swipe from the upper items in the right list and from the lower items


Ion-scroll
#9

The card-wrapper divs are on top of each other because you gave them each width: 99% and they are absolutely positioned. They need to only take up 50% of the width, and then the inside cards should take up 100% of their container (the wrapper). Here are some style changes: http://codepen.io/brandyshea/pen/eNdyKN

I recommend spending a lot of time using inspect element to find out where the divs are and any extra margin that is unwanted. :smile:


#10

@brandyshea … opppsss … i missed this one :slight_smile: , thanks for ur help