angularjs - Vertical scroll bar with Ionic multiple views -


i'm using multiple named views build ionic app screen.

the problem is, have verticle scroll bar spans enitre screen, though there no scrollable content.

the scroll bar covers header, content , footer sections. content section contains list, i'd scroll bar section, if there enough content need one.

here code.....

index.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">     <title></title>     <link href="lib/ionic/css/ionic.css" rel="stylesheet">     <link href="css/style.css" rel="stylesheet">     <!-- if using sass (run gulp sass first), uncomment below , remove css includes above     <link href="css/ionic.app.css" rel="stylesheet">     -->     <!--for users deploying apps windows 8.1 or android gingerbread, platformoverrided.js     inject platform-specific code /merges folder -->     <script src="js/platformoverrides.js"></script>     <!-- ionic/angularjs js -->     <script src="lib/ionic/js/ionic.bundle.js"></script>     <!-- cordova script (this 404 during development) -->     <script src="cordova.js"></script>     <!-- app's js -->     <script src="js/app.js"></script>     <script src="js/controllers.js"></script>   </head>   <body ng-app="starter">       <div ui-view="header"></div>       <div ui-view="content"></div>       <div ui-view="footer"></div>   </body> </html>

header.html

  <ion-content>     <ion-header-bar class="bar-positive">         <h1 class="title">header</h1>     </ion-header-bar>   </ion-content>

content.html

  <ion-content class="has-header has-footer">     <ion-list>       <ion-item ng-repeat="playlist in playlists" href="#/app/playlists/{{playlist.id}}">         {{playlist.title}}       </ion-item>     </ion-list>   </ion-content>

footer.html

  <ion-content>       <ion-footer-bar align-title="left" class="bar-royal">           <div class="buttons">               <button class="button">left button</button>           </div>           <h1 class="title">footer</h1>           <div class="buttons">               <button class="button">right button</button>           </div>       </ion-footer-bar>   </ion-content>

app.js

angular.module('starter', ['ionic', 'starter.controllers']) .run(function($ionicplatform) {   $ionicplatform.ready(function() {     // hide accessory bar default (remove show accessory bar above keyboard     // form inputs)       if (cordova.platformid === "ios" && window.cordova && window.cordova.plugins.keyboard) {       cordova.plugins.keyboard.hidekeyboardaccessorybar(true);       cordova.plugins.keyboard.disablescroll(true);     }     if (window.statusbar) {       // org.apache.cordova.statusbar required       statusbar.styledefault();     }   }); }) .config(function ($stateprovider, $urlrouterprovider) {     // if none of above states matched, use fallback     $urlrouterprovider.otherwise('/');     $stateprovider     .state('home', {         url: '/',         views: {             'header': {                 templateurl: '/templates/header.html'             },             'content': {                 templateurl: '/templates/content.html',                 controller: 'contentctrl'             },             'footer': {                 templateurl: '/templates/footer.html'             }         }     }); });

controllers.js

angular.module('starter.controllers', []) .controller('contentctrl', function ($scope) {     $scope.playlists = [       { title: 'reggae', id: 1 },       { title: 'chill', id: 2 },       { title: 'dubstep', id: 3 },       { title: 'indie', id: 4 },       { title: 'rap', id: 5 },       { title: 'cowbell', id: 6 }     ]; });

do know how can remove full screen scroll bar, keep 1 list?

thanks,

damian

enter image description here

as u can see there scrollbar inside content area. header , footer sticky. can u provide screenshots ?


Comments

Post a Comment

Popular posts from this blog

aws api gateway - SerializationException in posting new Records via Dynamodb Proxy Service in API -

i getting "__type": "com.amazon.coral.service#serializationexception" as reply in postman & in test console in api gateway trying post record directly dynamodb using api proxy services.. referring aws article - https://aws.amazon.com/blogs/compute/using-amazon-api-gateway-as-a-proxy-for-dynamodb/ here's mapping { "tablename": "tablenamegoeshere", "item": { "id" : "$context.requestid" "eventname" : "$input.path('$.eventname')", "timestamp" : $input.path('$.timestamp'), "answers": "$util.parsejson($input.path('$.answers'))" } } update: did asked ... , worked if try add array of json objects gives me above same error - here's trying now. please - couldnt find on google well #set($inputroot = $input.path('$')) { "tablename": "answer", "item": {
Read more

asp.net - Problems sending emails from forum -

i have been redesigning site has message board, has been written guy looked after site. it has few problems , written in .asp , uses .mdb files database. you can see whole thing here . feel free post if helps, test thing have set using original files , new database. the basic problem when posts message, supposed email sent them, have posted it. when replies, originator supposed message, replier has been posted. i’d have thought @ point in process there should script/file in postmessage.asp? the postmessage.asp page below. <% option explicit %> <!-- #include virtual="common/adovbs.inc" --> <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1252"> <meta name="generator" content="microsoft frontpage 4.0"> <meta name="progid" content="frontpage.editor.document"> <title>new page 2</title> <base target="_self"
Read more