Initially there will be set of images at left and right. if i click set image on left side. it will be moved to right side. right side column will show the selected pictures, left side column shows unselected pictures. i will be able to select 5 pictures at a time and submit it. if i click submit button those 5 images will be shown in another page,post request will be sent to server.there will be one button in that page called change picture button. if i click that , i need already selected images to be shown at another page of right hand side column.
Here is the plunker link https://plnkr.co/edit/BM4AavLn9uKxKL4wdbT6?p=preview
<body ng-controller="myController">
<div class="row">
<div class="col-xs-6 col-sm-5 col-md-5">
<h3 style="text-align: center;text-shadow: 0px 4px 6px;">All Pictures</h3>
<div class="row" ng-repeat="media in pinMedia">
<!-- pin.media_id!=media._id || -->
<div class="col-xs-12 col-sm-12 col-md-5">
<img ng-src="http://placehold.it/{{images}}" width="200px" />
<p>{{media.Name}}</p>
<div class="col-xs-12 col-sm-12 col-md-5">
<button ng-disabled='limit()' class="btn btn-success" style="border: .0625rem solid transparent;padding: .465rem 1rem;" ng-click="toselected(media)">
<i class="fa fa-picture-o"></i>
Set Picture</button >
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-5 col-md-5">
<h3 style="text-align: center;text-shadow: 0px 4px 6px;">Selected Pictures</h3>
<div ng-repeat="media in selected">
<!-- pin.media_id==media._id && -->
<div>
<img ng-src="http://placehold.it/{{images}}" width="200px" />
<p>{{media.Name}}</p>
<div>
<a class="btn btn-success " style="border: .0625rem solid transparent;padding: .465rem 1rem;" ng-click="tosource(media)">
<i class="fa fa-picture-o"></i>
Remove Picture</a>
</div>
</div>
</div>
</div>
<button ng-click="setMediaForCurrentPin(selected)" class="btn btn-success" style="margin:50px auto; display:table;">Submit</button>
</div>
Related
I have implemented Pagination and Search in AngularJS but its working in only on displayed page.
Html file
<div id="home" class="tab-pane fade in active">
<div class="row"><div class="col-md-10"><h1 style="font-size: 25px;margin-bottom:26px;">Jobs</h1></div></div>
<div class="row">
<div class="col-md-0"></div>
<div class="col-md-10" style="margin-top:5px">
<div class="container">
<li style="list-style-type: none;display: inline-block;width: 85%;"> <form name="myForm" action="/action_page.php" method="get" class="adjust" style="margin-left:-26px;margin-top:2px;">
<input type="text" name="Keyword" placeholder="Keyword" class="borderclr" ng-model='search.jobTitle' style="border: 1px solid #ddd;padding: 10px;width: 48%;margin-left:5px;">
<input type="text" name="Location" placeholder="Location"class="borderclr" ng-model='search.location' style="border: 1px solid #ddd;padding: 10px;width: 50%;">
</form>
</li>
<li style="list-style-type: none;display: inline-block;">
<i class="fa fa-plus" title="Add Job" ng-click="openJobModal('add')" data-toggle="modal" data-target="#jobDetails"
style="margin-top: 33px; color: rgb(237,78,110);cursor: pointer;font-size: 22px;margin-left: -140px;outline:none;"></i>
</li>
</div>
<div class= row>
<div class="col-md-10"></div>
<div class="col-md-2"></div>
</div>
<div ng-repeat="Job in JobDetails.slice(((currentPage-1)*itemsPerPage), ((currentPage)*itemsPerPage)) | filter:search:strict">
<!-- <p style="font-size: 13px;color: #808080;padding: 18px;margin-left: 49px;">Found 395 Jobs</p> -->
<h3 style="font-size: 18px;color: #000;font-weight: 600;margin-top: 2px;margin-left: -4px;text-align:left;margin-bottom: -7px;">
Title : {{Job.jobTitle}}</h3>
<div class="row" style="margin-left:1px;">
<div class="col-md-8" style="margin-left: -16px;margin-top:6px"> <b> {{Job.location}} | {{Job.jobRate}} | {{Job.jobType}}</b></div>
<div class="col-md-1"><i class="fa fa-eye" title="View Job" ng-click="Jobview(Job.SerialNumber)" data-toggle="modal" data-target="#jobDetails" style="margin-top:10px;cursor: pointer;color : rgb(237,78,110);font-size:22px;outline:none;"></i></div>
<div class="col-md-1"><i class="fa fa-trash" title="Delete Job" ng-click="JobDelete(Job.SerialNumber,Job.Publish)" style="margin-top:10px;cursor: pointer;color : rgb(237,78,110);font-size:22px;outline:none;"></i></div>
<div class="col-md-2"><button style="padding: 6px 22px;" ng-click="jobPublish('true',Job.SerialNumber)" type="button" ng-hide="{{Job.Publish}}" class="btn btn-success">Publish</button>
<button type="button" ng-click="jobPublish('false',Job.SerialNumber)" ng-show="{{Job.Publish}}" class="btn btn-warning">UnPublish</button>
</div>
</div>
<p style=" text-align: justify;text-justify: inter-word;">
<b>Description :</b>{{Job.jobDescription | limitTo: 400 }}{{Job.jobDescription.length > 400 ? '...' : ''}}</p>
<hr>
</div>
</div>
</div>
<div ng-show="JobDetails !=''" style="text-align: right;">
<pagination total-items="JobDetails.length" ng-model="currentPage" ng-change="pageChanged()" max-size="maxSize" class="pagination-sm" boundary-links="true" items-per-page="itemsPerPage"></pagination>
</div>
</div>
Script
$scope.JobDetails = [];
for(var i=response.data.length-1;i>=0;i--){
$scope.JobDetails.push(response.data[i]);
}
$scope.viewby = 5;
$scope.totalItems = $scope.JobDetails.length;
$scope.currentPage = 1;
$scope.itemsPerPage = $scope.viewby;
$scope.maxSize = 7; //Number of pager buttons to show
When i use search box and search , the results are only for that page . If we remove the pagination the search is working fine.
Can some one please help.
your search filter is applied to currant page items only therefore you get only filtered item that exist in this page.
you can do the following to solve the problem:
<div ng-repeat="Job in currentJobDetails | filter:search:strict">
in your pageChanged() function you can add:
function pageChanged(){
currentJobDetails = JobDetails.slice(((currentPage-1)*itemsPerPage), ((currentPage)*itemsPerPage));
}
you may also need to add search button and call function when is clicked:
function search(){
currentJobDetails = JobDetails;
}
this will search across all your items
I have a panel header which I have divided into 2 parts.
when I click on one panel then its background is sky blue and text color is white while other panel background is gray with black text color and clicking on that panel background and text color is changed alternatively.
.prefix_event {
text-align: center;
background: #f2f1f1;
color: #555555;
padding: 10px;
font-size: 12px;
}
.prefix_previous {
text-align: center;
background: #24b6e3;
color: #FFFFFF;
padding: 10px;
font-size: 12px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app class="row">
<div class="col-md-12 col-sm-12 col-xs-12 ">
<div class="panel panel-default set_padding_0 set_margin_0">
<div class="panel-heading set_padding_0 set_margin_0 cursor_pointer">
<div class="row set_margin_0">
<div class="col-md-6 col-sm-6 col-xs-12 text-center prefix_previous" ng-click="option='event_exhibitors'" ng-init="option='event_exhibitors'">
Event Exhibitors
</div>
<div class="col-md-6 col-sm-6 col-xs-12 text-center prefix_event" ng-click="option='previous_exhibitors'">
Previous Exhibitors
</div>
</div>
</div>
<div class="panel-body" ng-show="option==='event_exhibitors'">
<div class="row ">
<div class="inner-addon right-addon col-md-12 col-sm-12 col-xs-12">
<input type="text" class="form-control" placeholder="Search" />
<i class="glyphicon glyphicon-search search_icon_color"></i>
</div>
</div>
</div>
<div class="panel-body" ng-show="option==='previous_exhibitors'">
<div class="row ">
<p>Previous Exhibitors</p>
<p>Previous Exhibitors</p>
</div>
</div>
</div>
</div>
</div>
what i want is. when clicking on previous exhibitors panel. the background color and text color of event exhibitors should be given to previous exhibitors and event_exhibitors should get previous exhibitors background and text color. so it will be vice versa CSS on click.
Any help would be great.
Its very simple using the toggle option like this in the
$scope.toggle="false";
Your HTML will be like this
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12 ">
<div class="panel panel-default set_padding_0 set_margin_0">
<div class="panel-heading set_padding_0 set_margin_0 cursor_pointer">
<div class="row set_margin_0">
<div class="col-md-6 col-sm-6 col-xs-12 text-center prefix_previous"
ng-click="toggle = !toggle"
ng-class="{prefix_event : toggle, prefix_previous : !toggle}"
>
Event Exhibitors
</div>
<div class="col-md-6 col-sm-6 col-xs-12 text-center prefix_event"
ng-click="toggle = !toggle"
ng-class="{'prefix_previous' : toggle}"
>
Previous Exhibitors
</div>
</div>
</div>
<div class="panel-body" ng-show="option==='event_exhibitors'">
<div class="row ">
<div class="inner-addon right-addon col-md-12 col-sm-12 col-xs-12">
<input type="text" class="form-control" placeholder="Search" />
<i class="glyphicon glyphicon-search search_icon_color"></i>
</div>
</div>
</div>
<div class="panel-body" ng-show="option==='previous_exhibitors'">
<div class="row ">
<p>Previous Exhibitors</p>
<p>Previous Exhibitors</p>
</div>
</div>
</div>
</div>
</div>
DEMO
UPDATE 1 : Also check the modified plunker in the same link
Change these # Previous Exhibitors
<div class="panel-body" ng-show="!toggle">
Change these # Event Exhibitors
<div class="panel-body" ng-show="toggle">
you can achieve this functionality with simple Jquery.
Change colour of table row onclick
and if you use class="col-xs-12" then it overrides other higher sizes as well and make them 12(col-sm-12,col-md-12,col-lg-12).
http://getbootstrap.com/css/#grid
I will select the images in one page and show those selected 5 images in other page.the selected images will be stored in selected array initially, before sending put request to server. In showing page, i had one button called change picture ,i am sending put request to server after selecting 5 images in selecting image page,that will be stored in an array called other_media.if i click change picture button it will redirect to selecting image page.(again the selected array will be empty) in selecting image page, those images which are already selected to be shown at right side[means i need to push the data in other_media array to selected array] of the result in plunker. i need exactly showing the images which are already selected(posted or put) the plunker is only one page which i select the images.
Plunker https://plnkr.co/edit/BM4AavLn9uKxKL4wdbT6?p=preview
<div class="row">
<div class="col-xs-6 col-sm-5 col-md-5">
<h3 style="text-align: center;text-shadow: 0px 4px 6px;">All Pictures</h3>
<div class="row" ng-repeat="media in pinMedia">
<!-- pin.media_id!=media._id || -->
<div class="col-xs-12 col-sm-12 col-md-5">
<img ng-src="http://placehold.it/{{images}}" width="200px" />
<p>{{media.Name}}</p>
<div class="col-xs-12 col-sm-12 col-md-5">
<button ng-disabled='limit()' class="btn btn-success" style="border: .0625rem solid transparent;padding: .465rem 1rem;" ng-click="toselected(media)">
<i class="fa fa-picture-o"></i>
Set Picture</button >
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-5 col-md-5">
<h3 style="text-align: center;text-shadow: 0px 4px 6px;">Selected Pictures</h3>
<div ng-repeat="media in selected">
<!-- pin.media_id==media._id && -->
<div>
<img ng-src="http://placehold.it/{{images}}" width="200px" />
<p>{{media.Name}}</p>
<div>
<a class="btn btn-success " style="border: .0625rem solid transparent;padding: .465rem 1rem;" ng-click="tosource(media)">
<i class="fa fa-picture-o"></i>
Remove Picture</a>
</div>
</div>
</div>
</div>
</div>
<!--I have id in my work. but here we don't have id. i need to save particular object in an selected array to another array -->
<button ng-click="setMediaForCurrentPin(selected)" class="btn btn-success" style="margin:50px auto; display:table;">Submit</button>
Javascript
$scope.selected = [];
FromOne2Another = function(source, target, item) {
target.push(item);
source.splice(source.indexOf(item), 1);
}
//this is the starting of code where i send the selected pitures from unselected before put request.
$scope.toselected = function(item) {
FromOne2Another($scope.pinMedia, $scope.selected, item);
}
$scope.tosource = function(item) {
FromOne2Another($scope.selected, $scope.pinMedia, item);
}
//this is the ending of above code
//From here i am trying to get the data from the stored media
$scope.toSelectedArray=function(item){
FromOne2Another($scope.other_media, $scope.selected, item);
console.log($scope.pins);
}
If i use like this inside service, why i am getting Cannot read property 'splice' of undefined
one my website video to understand https://nimbus.everhelper.me/client/notes/share/376595/vyEMbEoxsFIfN3X39T5tLdbD8aGfxAgF
I have 2 columns, first column is Unselected images and button called Select picture next to it and second column is selected images and button called Remove picture. if i click Select picture button for one image at left column, it should move to right side column and it should disappear in left side column.
Viceversa for the remove picture. if i click remove picture at right, it should disappear at right and should appear at left.I should be able to select and remove multiple pictures. i have used angular js. Can anyone please help me
Plunker here https://plnkr.co/edit/rtJP91MtYISyVZkdFWr8?p=preview
<body ng-controller="myController">
<div class="row">
<div class="col-xs-6 col-sm-5 col-md-5">
<h3 style="text-align: center;text-shadow: 0px 4px 6px;">All Pictures</h3>
<div class="row" ng-repeat="media in pinMedia" ng-init="setMedia=[]">
<!-- pin.media_id!=media._id || -->
<div ng-show="!setMedia[$index]" class="col-xs-12 col-sm-12 col-md-5">
<img ng-src="http://placehold.it/{{images}}" width="200px">
<div class="col-xs-12 col-sm-12 col-md-5">
<a class="btn btn-success" style="border: .0625rem solid transparent;padding: .465rem 1rem;" ng-click="setMedia[$index]=false"><i class="fa fa-picture-o"></i> Set Picture</a>
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-5 col-md-5">
<h3 style="text-align: center;text-shadow: 0px 4px 6px;">Selected Pictures</h3>
<div ng-repeat="media in pinMedia">
<!-- pin.media_id==media._id && -->
<div ng-show="setMedia[$index]">
<img ng-src="http://placehold.it/{{images}}" width="200px">
<div>
<a class="btn btn-success " style="border: .0625rem solid transparent;padding: .465rem 1rem;" ng-click="removeMediaForCurrentPin(media)"><i class="fa fa-picture-o"></i> Remove Picture</a>
</div>
</div>
</div>
</div>
</div>
I corrected your Plunker, please look at new example.
HTML:
<body ng-controller="myController">
<div class="row">
<div class="col-xs-6 col-sm-5 col-md-5">
<h3 style="text-align: center;text-shadow: 0px 4px 6px;">All Pictures</h3>
<div class="row" ng-repeat="media in pinMedia">
<!-- pin.media_id!=media._id || -->
<div class="col-xs-12 col-sm-12 col-md-5">
<img ng-src="http://placehold.it/{{images}}" width="200px" />
<p>{{media.Name}}</p>
<div class="col-xs-12 col-sm-12 col-md-5">
<button ng-disabled='limit()' class="btn btn-success" style="border: .0625rem solid transparent;padding: .465rem 1rem;" ng-click="toselected(media)">
<i class="fa fa-picture-o"></i>
Set Picture</button >
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-5 col-md-5">
<h3 style="text-align: center;text-shadow: 0px 4px 6px;">Selected Pictures</h3>
<div ng-repeat="media in selected">
<!-- pin.media_id==media._id && -->
<div>
<img ng-src="http://placehold.it/{{images}}" width="200px" />
<p>{{media.Name}}</p>
<div>
<a class="btn btn-success " style="border: .0625rem solid transparent;padding: .465rem 1rem;" ng-click="tosource(media)">
<i class="fa fa-picture-o"></i>
Remove Picture</a>
</div>
</div>
</div>
</div>
</div>
</body>
Javascript:
var newapp = angular.module('angularApp', []);
newapp.controller('myController',function($scope){
$scope.pinMedia=[
{Name:'130x130'},
{Name:'150x150'},
{Name:'170x170'},
{Name:'180x180'},
{Name:'190x190'},
{Name:'200x200'},
{Name:'210x210'}
];
$scope.selected=[];
FromOne2Another = function(source, target, item){
target.push(item);
source.splice(source.indexOf(item),1);
}
$scope.toselected = function(item){
FromOne2Another($scope.pinMedia, $scope.selected, item);
}
$scope.tosource = function(item){
FromOne2Another($scope.selected, $scope.pinMedia, item);
}
$scope.limit=function(){
return 5==$scope.selected.length;
}
});
I am pretty new to Ionic Framework and the entire hybrid platform.
I have developed a very simple application by using too many tutorials over the internet and the application is working perfectly as expected except the home page.
I have an overall page view that has an ion-content and then there are multiple ion-scroll on the page.
The problem is the scrolling doesn't work as the normal native Android/iOS application.
Can anyone help with this?
Attached below is the full code:
<ion-view ng-init="LoadPage()">
<ion-content ng-show="contentloading" scroll="true">
<ion-refresher pulling-text="Pull to refresh" on-refresh="LoadPage()" >
</ion-refresher>
<div class="row-no-padding">
<div class="row row-no-padding row-center" style="padding-left: 5px;">
<div class="col-33 col-center">
<h5 class="latest-news headingStyle" data-fittext data-fittext-max="12px">Latest News</h5>
</div>
<div class="col col-center">
<ion-slide-box does-continue="true" auto-play="true" show-pager="false">
<ion-slide ng-repeat="item in Slides" ng-click="GoToPost({{item.id}})">
<h4 class="{{FontDetails(1)}}" style="margin-left: 5px;word-break: break-all;white-space:nowrap;overflow:hidden; color:#bb1515;font-size:12px;" ng-bind-html="item.title | unsafe"></h4>
</ion-slide>
</ion-slide-box>
</div>
</div>
</div>
<div class="row-no-padding">
<ion-slide-box does-continue="true" auto-play="true" show-pager="false">
<ion-slide ng-repeat="item in Slides" ng-click="GoToPost({{item.id}})">
<div class="row-wrap">
<div class="col" style="background: url({{item.thumbnail_images.medium.url}}) no-repeat center center; -webkit-background-size: cover;-moz-background-size: cover;background-size: cover;min-height: 200px;height:250px;max-height:300px;z-index: 1;">
</div>
<div style="background:black;position:absolute;opacity: 0.5;filter: alpha(opacity=50);height:auto;bottom:0%;width: 100%;overflow:hidden;z-index:2; vertical-align: top;" class="col">
<h4 class="latest-news-add {{FontDetails(1)}}" ng-bind-html="item.title | unsafe"></h4>
</div>
</div>
</ion-slide>
</ion-slide-box>
</div>
<!-- </div>
</div>-->
<div class="row-no-padding">
<div class="row row-no-padding" style="padding: 5px;">
<div class="col col-33 col-center">
<h5 class="latest-news categoryHeading {{FontDetails(1)}}">{{'Gujarat'| translate}}</h5>
</div>
</div>
<div class="row row-no-padding" style="padding: 5px; overflow: auto;white-space: nowrap; overflow-y: scroll; position: relative;">
<div class="col" >
<ion-scroll direction="x" scroll-outside="true" class="wide-as-needed">
<span>
<span class="wrapperhome" ng-repeat="item in gujarat">
<img on-swipe-left="onSwipeLeft()" on-swipe-right="onSwipeRight()" ng-src="{{item.thumbnail_images.medium.url}}" ng-click="GoToPost({{item.id}})" width="150px" height="150px"/>
<div>
<h6 class="{{FontDetails(1, 0)}}" ng-bind-html="item.title | unsafe"></h6>
</div>
</span>
</span>
</ion-scroll>
</div>
<!--<div class="col">-->
</div>
<div class="row row-no-padding" style="padding: 5px;">
<div class="col col-33 col-center">
<h5 class="latest-news categoryHeading {{FontDetails(1)}}">{{'Politics'| translate}}</h5>
</div>
</div>
<div class="row row-no-padding" style="padding: 5px;">
<div class="col">
<ion-scroll direction="x" class="wide-as-needed">
<span>
<span class="wrapperhome" ng-repeat="item in politics">
<img ng-src="{{item.thumbnail_images.medium.url}}" ng-click="GoToPost({{item.id}})" width="150px" height="150px"/>
<div>
<h6 class = "{{FontDetails(1)}}" ng-bind-html="item.title | unsafe"></h6>
</div>
</span>
</span>
</ion-scroll>
</div>
</div>
<div class="row row-no-padding" style="padding: 5px;">
<!-- <div class="col col-34" style="text-align: center;margin-bottom: 10px;background-color: firebrick;vertical-align: middle;text-align: center;color:white;font-family: HouseGothicHG23Text-Bold;font-size:1.30em;">
Technology
</div>-->
<div class="col col-center">
<h5 class="latest-news {{FontDetails(1)}} categoryHeading ">{{'Technology'| translate}}</h5>
</div>
</div>
<div class="row row-no-padding" style="padding: 5px;">
<div class="col">
<ion-scroll direction="x" class="wide-as-needed">
<span>
<span class="wrapperhome" ng-repeat="item in technology">
<img ng-src="{{item.thumbnail_images.medium.url}}" ng-click="GoToPost({{item.id}})" width="150px" height="150px"/>
<div>
<h6 class = "{{FontDetails(1)}}" ng-bind-html="item.title | unsafe"></h6>
</div>
</span>
</span>
</ion-scroll>
</div>
</div>
</div>
<div class="row row-no-padding" style="padding: 5px;">
<div class="col">
<ion-list>
<div ng-repeat="item in FooterItems" ng-if="(item.MenuOption !== 'Home' || item.MenuOption !== 'Favorite')" style="margin-bottom: 10px;">
<ion-item style="border: 0px!important;" class="item-stable item item-icon-left home-item-footer item-icon-right {{FontDetails(1)}}" ng-click="toggleGroup({{item.group}},'{{item.link}}')" ng-class="{active: isGroupShown({{item.group}})}">
<i class="icon"><img src="img/{{item.link}}.png" style="width:20px;height:20px;"/></i>
{{item.MenuOption| unsafe | translate}}
<i ng-class="isGroupShown({{item.group}}) ? 'ion-chevron-down' : 'ion - chevron - right'" class="icon" style="font-size:1em;"></i>
</ion-item>
<ion-item class="item-accordion" ng-show="isGroupShown({{item.group}})" style="padding-left:1px;padding-top:1px!important">
<!-- <div class="row row-no-padding">
<div class="col">
<ion-scroll direction="x" class="wide-as-needed">
<span>
<span class="wrapper"
ng-repeat="categoryitem in item.items">
<img ng-src="{{categoryitem.thumbnail_images.medium.url}}" ng-click="GoToPost({{categoryitem.id}})" width="150px" height="150px"/>
<div>
<h6 class = "{{FontDetails(0)}}" ng-bind-html="categoryitem.title | unsafe"></h6>
</div>
</span>
</span>
</ion-scroll>
</div>
</div>-->
<div class="row row-no-padding" style="padding: 5px;">
<div class="col">
<ion-scroll direction="x" class="wide-as-needed">
<span>
<span class="wrapperhome" ng-repeat="categoryitem in item.items">
<img ng-src="{{categoryitem.thumbnail_images.medium.url}}" ng-click="GoToPost({{categoryitem.id}})" width="150px" height="150px"/>
<div>
<h6 class = "{{FontDetails(1)}}" ng-bind-html="categoryitem.title | unsafe"></h6>
</div>
</span>
</span>
</ion-scroll>
</div>
</div>
</ion-item>
</div>
</ion-list>
</div>
</div>
</ion-content>
You need to make sure you're declaring the height and width of each <div> you're scrolling. From the ion-scroll docs:
Basic usage:
<ion-scroll zooming="true" direction="xy" style="width: 500px; height: 500px">
<div style="width: 5000px; height: 5000px;
background: url('https://upload.wikimedia.org/wikipedia/commons/a/ad/Europe_geological_map-en.jpg') repeat">
</div>
</ion-scroll>
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.