Угловые UI-Layout перекрытия с navbar

Я недавно пытался использовать UL Layout (https://github.com/angular-ui/ui-layout), который довольно прост в использовании. Тем не менее, я обнаружил, что макет пользовательского интерфейса всегда перекрывается с помощью навигационной панели Bootstrap.Угловые UI-Layout перекрытия с navbar

YOu может посмотреть на него здесь: 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>

Дальнейшее исследование показывает, что это вызвано абсолютным позиционированием макета пользовательского интерфейса. Если я добавлю силот:

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

Интерфейс пользовательского интерфейса больше не будет перекрываться с навигационной панелью.

Однако возникает другая проблема, если размер экрана изменяется, мне нужно вручную изменить свойство высоты стиля.

Так что мне интересно, есть ли какой-либо простой способ справиться с этим.

Благодаря Дерек

источник

2015-08-10 derek

Это также является проблемой, даже если вы используете UI-маршрутизатор поставить UI-макеты в шаблонах. – Romain

Вы можете обернуть UI-макета для контейнера со стилями для предотвращения перекрытия:

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

http://plnkr.co/edit/nRW2qbiwadyO1ICdgbQq

источник

2015-08-10 07:30:46

Это взлом, а не то, что я хочу. Например, если вы помещаете некоторое содержимое в UI-Layout, вы должны вручную изменить стиль. См. Пример здесь: http: //plnkr.co/edit/0cKLghOFVAXzk76ccGKD Я положил «

Not working fluently .

» после UI-макета, и это содержимое перекрывается с содержимым пользовательского интерфейса. – derek

может быть, это слишком поздно, но у меня есть такая же проблема, и это мое решение: просто добавьте поддельный div с размером и максимальным размером со значением высоты вашего навигатора в ваш ui-макет и сделайте ваше навигационное исправление сверху!

<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>

это your plunker updated

источник

2017-06-21 08:12:12 lolo

Угловые UI-Layout перекрытия с navbar

ответ

Смежные вопросы