Geek Answers Handbook

Angular UI-Layout overlaps with navbar

I recently tried Angular UI Layout ( https://github.com/angular-ui/ui-layout ), which is pretty easy to use. However, I found that the user interface layout always overlaps with the Bootstrap navigation bar.

You can look here: http://plnkr.co/edit/r5veawwbgz98bZjLdr1B

<!DOCTYPE html> <html ng-app="x"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width"> <title>UI.Layout Issue</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css"> <link rel="stylesheet" href="https://rawgithub.com/angular-ui/ui-layout/v1.0.5/ui-layout.css"> <link rel="stylesheet" href="style.css"> </head> <body> <nav class="navbar navbar-default navbar-static-top"> <div class="container"> <div class="navbar-header"> <a class="navbar-brand" href="#"><i class="glyphicon glyphicon-envelope"></i><span>Website</span></a> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">menu1</a></li> <li><a href="#about">Menu2</a></li> <li><a href="#about">Menu3</a></li> <li><a href="#about">Menu4</a></li> <li><a href="#contact">Contact</a></li> </ul> </div> </div> </nav> <div ui-layout style="position:relative; height:500px"> <div ui-layout-container style="border-style: solid;"><h1>top</h1></div> <div ui-layout-container> <div ui-layout="{flow : 'column'}" > <div ui-layout-container style="border-style: solid;" ><h1>left</h1></div> <div ui-layout-container style="border-style: solid;" ><h1>right</h1></div> </div> </div> <div ui-layout-container style="border-style: solid;"><h1>bottom</h1></div> </div> <!-- Le javascript --> <script type="application/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script> <script type="application/javascript" src="https://rawgithub.com/angular-ui/ui-layout/v1.0.5/ui-layout.min.js"></script> <script> angular.module('x', ['ui.layout']); </script> </body> </html>

Further research shows that this is due to the absolute layout of the UI layout. If I add sytle:

 <div ui-layout style="position:relative; height:500px">.

The user interface layout will no longer overlap with the navigation bar.

However, another problem arises, if the screen size changes, I need to manually change the height property of the style.

So, I am wondering if there is an easy way to handle this.

Thanks Derek

+4
source share
2 answers

It may be too late, but I have the same problem, and this is my solution: just add a fake div with size and maximum size with the value of your navigator height to your ui layout and make your navigation fix from above!

  <nav class="navbar navbar-default navbar-fixed-top"> <div ui-layout> <div ui-layout-container size="40px" max-size="40px" style="border-style: solid;"> <h1>fake</h1></div> <div ui-layout-container style="border-style: solid;"> <h1>top</h1></div> <div ui-layout-container> <div ui-layout="{flow : 'column'}"> <div ui-layout-container style="border-style: solid;"> <h1>left</h1></div> <div ui-layout-container style="border-style: solid;"> <h1>right</h1></div> </div> </div> <div ui-layout-container style="border-style: solid;"> <h1>bottom</h1></div>

this is your pluker updated

+1
source

You can wrap your UI-Layout in a styles container to prevent a match:

 .wrap { position: absolute; top: 50px; left:0; bottom:0; right:0; }

http://plnkr.co/edit/nRW2qbiwadyO1ICdgbQq

0
source

More articles:


All Articles