Im trying to allow the inner div in my HTML to allow scrolling. I'm not sure what is preventing the scrolling.
Here's my HTML:
<div class ="item item-text-wrap" ng-class="{show: showingdata, more: moreinfo}">
<div>
<!-- Stuff I don't want to have scroll -->
</div>
<div class="scrollable">
<!-- Scrollable Stuff Here -->
</div>
</div>
And here's my CSS:
.item.item-text-wrap{
z-index: 10;
position: absolute;
bottom: 0px;
width:101%;
max-height: 25px;
color:rgba(255, 255, 255, 1);
background-color: rgba(50, 50, 50, 0.75);
border: 0;
overflow: hidden;
-webkit-transition: max-height .1s;
transition: max-height .1s;
}
.item.item-text-wrap.show{
max-height: 180px;
height: 500px;
}
.scrollable{
height: 1000px;
position: relative;
margin-bottom: 20px !important;
overflow-y: scroll;
}
Note: In the past I've given the class .item.item-text-wrap a height value, although that has again not proved fruitful.
Any and all help would be greatly appreciated!
Just use a then you dont need a bunch of complicated css. if you dont want the top cut off add the class "has-header" to the parent div. Then you can click and drag to scroll the scrollable stuff
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="http://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script>
</head>
<body ng-app="app">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Awesome App</h1>
</ion-header-bar>
<div class ="item item-text-wrap" ng-class="{show: showingdata, more: moreinfo}">
<div>
<h1>stuff</h1>
</div>
<ion-scroll>
<h1>Scrollable stuff</h1>
</ion-scroll>
</div>
</ion-pane>
</body>
</html>
CSS: None
JS:
angular.module('app', ['ionic']);
See the Playground: http://play.ionic.io/app/f16c9cdc68bd
No CSS expert here, but I think the trick is in the max-height of the parent div and the height of the inner div.