CODEWITHSUNDEEP
angularjsionic-framework
Chintan Soni
Chintan Soni

Reputation: 25267

ionic: content goes behind nav bar

So, I have a code pen link here: http://codepen.io/anon/pen/oXwZmr

In that, they combined all the templates in index.html (tabs.html, mainContainer.html, entry.html, ...) and all controllers of template pages in js file(MainController, TabsPageController, ...).

I wanted to keep all things separate, so i did like index.html, mainController.html mainController.js, tabs.html, tabs.js, app.js.

The codepen works perfectly. But I am getting problem. My Content is going behind tabs.

index.html

<html ng-app="DroidRestClient">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

        <title>Droid Rest Client</title>

        <!--        <link href="http://code.ionicframework.com/0.9.27/css/ionic.min.css" rel="stylesheet">
                <script src="http://code.ionicframework.com/0.9.27/js/ionic.bundle.min.js"></script>-->

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

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

        <script src="js/app.js" type="text/javascript"></script>
        <script src="templates/mainContainer/mainContainer.js" type="text/javascript"></script>
        <script src="templates/tabs/tabs.js" type="text/javascript"></script>
    </head>
    <body>

        <!-- ALL VIEW STATES LOADED IN HERE -->
    <ion-nav-view>

    </ion-nav-view>
</body>
</html>

app.js

angular.module('DroidRestClient', ['ionic', 'DroidRestClient.mainController', 'DroidRestClient.tabsPageController'])

    .config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {

        $stateProvider
            .state('main', {
                url : '/main',
                templateUrl : 'templates/mainContainer/mainContainer.html',
                abstract : true,
                controller : 'MainController'
            })
            .state('main.tabs', {
                 url: '/tabs',
                 views: {
                     'main': {
                         templateUrl: 'templates/tabs/tabs.html',
                         controller : 'TabsPageController'
                     }
                 }
            });

        $urlRouterProvider.otherwise('/main/tabs');
    }]);

mainContainer.html

<ion-side-menus>
    <ion-pane ion-side-menu-content>
        <ion-nav-bar type="bar-positive"
                     back-button-type="button-icon"
                     back-button-icon="ion-ios7-arrow-back"
                     animation="nav-title-slide-ios7">
        </ion-nav-bar>
        <ion-nav-view name="main">

        </ion-nav-view>
    </ion-pane>

    <ion-side-menu side="left">
        <header class="bar bar-header bar-assertive">
            <div class="title">Settings</div>
        </header>
        <ion-content has-header="true">
            <ul class="list">
                <a ui-sref="main.tabs" class="item" ng-click="toggleMenu()">Tabs</a>
            </ul>
        </ion-content>
    </ion-side-menu>
</ion-side-menus>

mainContainer

angular.module('DroidRestClient.mainController', ['ionic'])
        .controller('MainController', ['$scope', function ($scope) {
                $scope.toggleMenu = function () {
                    $scope.sideMenuController.toggleLeft();
                };
            }]);

tabs.html

<ion-view title="{{navTitle}}"  left-buttons="leftButtons">
<ion-tabs class="tabs-icon-top tabs-color-active-positive">
    <ion-tab title="Request" icon-off="ion-ios-cloud-upload-outline" icon-on="ion-ios-cloud-upload">
        <ion-content has-header="true" padding="true">
            <form ng-submit="doLogin()">
                <div class="list">
                    <div class="item item-divider item-button-right">
                        Url
                    </div>
                    <label class="item item-input">
                        <input type="text" placeholder="enter url">
                    </label>
                    <div class="item item-divider item-button-right">
                        Method
                    </div>
                    <label class="item item-input">
                        <div class="input-label">
                            Method
                        </div>
                        <select>
                            <option selected>GET</option>
                            <option>POST</option>
                            <option>PUT</option>
                            <option>DELETE</option>
                        </select>
                    </label>
                    <div class="item item-divider item-button-right">
                        Parameters
                        <a class="button button-icon icon ion-ios-plus-empty"></a>
                        <button class="button button-positive">
                            <i class="icon ion-ios-plus-empty"></i>
                        </button>
                    </div>
                    <div class="list list-inset">
                        <div class="item">
                            No parameters
                        </div>
                    </div>
                    <div class="item item-divider item-button-right">
                        Headers
                        <a class="button button-icon icon ion-ios-plus-empty"></a>
                        <button class="button button-positive">
                            <i class="icon ion-ios-plus-empty"></i>
                        </button>
                    </div>
                    <div class="list list-inset">
                        <div class="item">
                            No headers
                        </div>
                    </div>
                    <div class="item item-divider item-button-right">
                        Body
                    </div>
                    <label class="item item-input">
                        <textarea placeholder="enter body"></textarea>
                    </label>
                </div>
            </form>
        </ion-content>
    </ion-tab>

    <ion-tab title="Response" icon-off="ion-ios-cloud-download-outline" icon-on="ion-ios-cloud-download">
        <ion-content has-header="true" padding="true">
            <h2>Response</h2>
        </ion-content>
    </ion-tab>
</ion-tabs>

tabs.js

angular.module('DroidRestClient.tabsPageController', ['ionic'])
    .controller('TabsPageController', ['$scope', '$state', function ($scope, $state) {
            $scope.navTitle = 'Home';

            $scope.leftButtons = [{
                    type: 'button-icon icon ion-navicon',
                    tap: function (e) {
                        $scope.toggleMenu();
                    }
                }];
        }]);

Upvotes: 0

Views: 1711

Answers (2)

alka vaghela
alka vaghela

Reputation: 855

Give class="has-header" to ion-content.

<ion-content class="has-header">
</ion-content>

And you need to initialise your angular app - See javascript on my example. Note ng-controller and ng-app.

Upvotes: 1

Niraj
Niraj

Reputation: 1

Add has-header="true" in tabs.html

in example; <ion-view title="{{navTitle}}" has-header="true" left-buttons="leftButtons">

I was also facing the same issue and it worked for me.

Upvotes: 0

Related Questions