AngularJs hidden NavBar

Question

I want to hide the navBar when the route is "/"

I succeeded to hide/show the navbar but the problem is that, when the navbar is hidden, the "app-body" div has 50px of padding top (where should be the navbar)

This is my html code

<body ng-app="myApp"  ng-controller="MainController" ui-prevent-touchmove-defaults>

    <div class="app">
        <!-- Navbars -->
        <div ng-hide="isActive('/')" ng-controller="NavBarController">
        
            <div class="navbar navbar-app navbar-absolute-top">
                <div class="navbar-brand navbar-brand-center" ui-yield-to="title">
                    Mobile Angular UI
                </div>
                <div class="btn-group pull-left">
                    <div ui-toggle="uiSidebarLeft" class="btn sidebar-toggle">
                        <i class="fa fa-bars"></i> Menu
                    </div>
                </div>
                <div class="btn-group pull-right" ui-yield-to="navbarAction">
                    <div ui-toggle="uiSidebarRight" class="btn">
                        <i class="fa fa-comment"></i> Chat
                    </div>
                </div>
            </div>
        </div>

        <!-- App Body -->

        <div class="app-body">
            <ng-view class="app-content"></ng-view>
        </div>
    </div>
</body>

This image shows the layout when the navbar is visible

This image shows the layout when the navbar is hidden

As you can see in the second image there is a grey section at the top. Am I dooing something wrong?

Thank you

post a fiddle so people can see your css too! It might be possible to put a class on the div with ng-controller that gives it a height of 50px instead of body having 50px padding. then wehn that is hidden, so is it's height. — Mohamed Nuur
– Mohamed Nuur, Commented Dec 21, 2015 at 18:02
Try changing the ng-hide to an ng-if. ng-if should remove the element altogether if true. — D Durham
– D Durham, Commented Dec 21, 2015 at 18:09
You are using ui-router? Just put the navbar inside ui-view. — Daniel Lizik
– Daniel Lizik, Commented Dec 21, 2015 at 20:56
I posted your "fixed" comment into an answer. You can mark it as accepted to show the problem is solved. Note in Stack Overflow changing the title to "solved" is not what we do; instead, we either post an answer of select the one that solved our issue. — fedorqui
– fedorqui, Commented May 13, 2016 at 10:04

Noah Wallace · Accepted Answer · 2015-12-22 03:47:36Z

1

In addition to this comment above

Try changing the ng-hide to an ng-if. ng-if should remove the element altogether if true.

Use ngClass to set a conditional class for your layout

answered Dec 22, 2015 at 3:47

Noah Wallace

1287 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

fedorqui · Accepted Answer · 2016-05-13 10:03:44Z

0

I solved my issue with the following html code

    <div class="app">
        <!-- Navbars -->
        <div ng-if="!isActive('/')" ng-include="'navBar.html'" ></div>

        <!-- App Body -->
        <div class="app-body">
            <ng-view class="app-content"></ng-view>
        </div>
    </div>
</body>

answered May 13, 2016 at 10:03

community wiki

fedorqui

Collectives™ on Stack Overflow

AngularJs hidden NavBar

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related