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 ?
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.
@brandyshea thanks alot, this fix 50% of the problem , but the other 50% is … i need to put multiple cards in the same view one beside the other with deferent heights, any help ?
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.
@brandyshea , i find the wrong part in my code, thanks alot for your fast reply
1 Like
@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 ?
Could you modify the codepen to show this? It’s easier to help that way.
@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
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.
1 Like
@brandyshea … opppsss … i missed this one , thanks for ur help