Unable to scroll within ion-view component

Question

Unable to scroll within ion-view component

I recently started working with the ionic framework and I am currently struggling with a scrolling issue in my page design. Below is the code from my index.html file:

<!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 rel="manifest" href="manifest.json">

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <script src="cordova.js"></script>

    <script src="js/app.js"></script>
  </head>
  <body ng-app="starter">
  
  <!-- Code omitted for brevity -->

  </body>
</html>

Currently, I am facing two main issues with the UI: 1) There is a gap in the layout, as indicated in the image here: https://i.sstatic.net/hHmRL.png

2) Some content is getting hidden behind the footer, as shown in this image: https://i.sstatic.net/rG12t.png

I am unsure of what mistake I may have made in utilizing ion-content and ion-view. Any assistance would be greatly appreciated.

html css angularjs ionic-framework

Answer 1

Answer №1

<!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 rel="manifest" href="manifest.json">

    <!-- service worker code
    <script>
      if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('service-worker.js')
          .then(() => console.log('service worker installed'))
          .catch(err => console.log('Error', err));
      }
    </script>-->

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
  </head>
  <body ng-app="starter">

    <ion-toolbar>
        <ion-nav-component>
            <ion-nav-bar class="bar-positive">
                <ion-nav-buttons side="left">
                    <button class="button button-icon ion-navicon" menu-toggle="left"></button>
                </ion-nav-buttons>
                <ion-nav-buttons side="right">
                    <button class="button button-icon ion-search"></button>
                    <button class="button button-icon ion-ios-email"></button>
                    <button class="button button-icon ion-ios-person"></button>
                </ion-nav-buttons>
                <h1 class="title"> Main Navigation Bar</h1>
            </ion-nav-bar>
            <ion-header-bar class="bar bar-balanced bar-subheader">
                <button class="button button-icon icon ion-chevron-left"></button>
                <button class="button">ABC</button>
                <h2 class="title">Sub Header</h2>
            </ion-header-bar>
                    <ion-content>
                        <h1> Sub header example 1</h1>
                        <h1> Sub header example 2</h1>
                        <h1> Sub header example 3</h1>
                        <h1> Sub header example 4</h1>
                        <h1> Sub header example 5</h1>
                        <h1> Sub header example 6</h1>
                        <h1> Sub header example 7</h1>
                        <h1> Sub header example 8</h1>
                        <h1> Sub header example 9</h1>
                        <h1> Sub header example 10</h1>
                        <h1> Sub header example 11</h1>
                        <h1> Sub header example 12</h1>
                        <h1> Sub header example 13</h1>
                        <h1> Sub header example 14</h1>
                        <h1> Sub header example 15</h1>
                    </ion-content>
<ion-footer-bar class="bar bar-footer bar-positive">
                Footer
            </ion-footer-bar>
        </ion-nav-component>
        <ion-nav-side>
            <ul class="list">
                <li class="item">first
            </ul>
        </ion-nav-side>
    </ion-toolbar>
  </body>
</html>

If you make this slight change, it should work for you.

Answer 2

<!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 rel="manifest" href="manifest.json">

    <!-- service worker code
    <script>
      if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('service-worker.js')
          .then(() => console.log('service worker installed'))
          .catch(err => console.log('Error', err));
      }
    </script>-->

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
  </head>
  <body ng-app="starter">

    <ion-toolbar>
        <ion-nav-component>
            <ion-nav-bar class="bar-positive">
                <ion-nav-buttons side="left">
                    <button class="button button-icon ion-navicon" menu-toggle="left"></button>
                </ion-nav-buttons>
                <ion-nav-buttons side="right">
                    <button class="button button-icon ion-search"></button>
                    <button class="button button-icon ion-ios-email"></button>
                    <button class="button button-icon ion-ios-person"></button>
                </ion-nav-buttons>
                <h1 class="title"> Main Navigation Bar</h1>
            </ion-nav-bar>
            <ion-header-bar class="bar bar-balanced bar-subheader">
                <button class="button button-icon icon ion-chevron-left"></button>
                <button class="button">ABC</button>
                <h2 class="title">Sub Header</h2>
            </ion-header-bar>
                    <ion-content>
                        <h1> Sub header example 1</h1>
                        <h1> Sub header example 2</h1>
                        <h1> Sub header example 3</h1>
                        <h1> Sub header example 4</h1>
                        <h1> Sub header example 5</h1>
                        <h1> Sub header example 6</h1>
                        <h1> Sub header example 7</h1>
                        <h1> Sub header example 8</h1>
                        <h1> Sub header example 9</h1>
                        <h1> Sub header example 10</h1>
                        <h1> Sub header example 11</h1>
                        <h1> Sub header example 12</h1>
                        <h1> Sub header example 13</h1>
                        <h1> Sub header example 14</h1>
                        <h1> Sub header example 15</h1>
                    </ion-content>
<ion-footer-bar class="bar bar-footer bar-positive">
                Footer
            </ion-footer-bar>
        </ion-nav-component>
        <ion-nav-side>
            <ul class="list">
                <li class="item">first
            </ul>
        </ion-nav-side>
    </ion-toolbar>
  </body>
</html>

If you make this slight change, it should work for you.

Unable to scroll within ion-view component

Answer №1

Similar questions

Having trouble getting Three JS to render files in scene 1 format 2?

When I view the website on a tablet in landscape mode, the navigation bar vanishes

Automated line wrapping within a div

The bs-dropdown feature within ui-grid angularjs is not automatically closing when a right-click event is triggered

When I click the submit button in HTML PHP, the text in the text field disappears. How can I make sure the text stays

Displaying text within an HTML table featuring a vibrant background

Using Bootstrap's dual listbox, you can easily select single options with the ability to add or delete them. Upon selection, the

Step-by-step guide on positioning a div below another div and centering both elements horizontally

The most effective method for incorporating a header and footer into an HTML page utilizing a variety of client-side frameworks

In order to position an inner div in the center and have it expand equally at the top and bottom according to the content size

If the header 1 contains a specific word in jQuery, then carry out an action

Attempting to eliminate the parent container of a slide generated by the Slick Slider Plugin

Uncovering website content with Selenium: unlocking the mysterious origins of the text

Implementing a delay using setTimeOut function to execute an action upon user input

"Styling a play button on top of an image using CSS

Only keep the href and target attributes (if target is not empty) in all anchor tags while removing all other attributes

Show HTML form elements on the page using jQuery or JavaScript

Animation using CSS keyframes for simultaneous manipulation of various properties

Using AngularJS to load a custom JavaScript file within an ng-view

Tips for adding an array to an array of objects with AngularJs