Clever Geek Handbook

Adjusting the height of the ui-view element [Angular.js Angular UI Router]

I am using angular.js and angular-ui-router. There is a slight problem with the height of the ui-view element. It is fixed at the height of the viewport, not its content. As the content dynamically updates, the content height changes and the parent ui-view element remains the same. This also keeps the body height the same as u-view. How to solve this problem

<body> 
    <div ui-view>
        <div id = "content"> 
            <!-- Some content with height more then that of view-port -->
        </div>
    </div>
</body>
+3


source to share


2 answers


This is a CSS problem, not an Angular problem. Your body is likely to be 100% tall. By setting it to

body {
    height: auto;
}

will fix it.



Documentation :

Percent height of the root element with respect to the original block entry .

+2


source


I created an example with a basic layout. He should show or give some answers how to use UI-Router, HTML and CSS. Layout idea:

  • fixed top panel
  • fixed left column
  • dynamic center area

inte index.html <div ui-view=""></div>

we enter layout.tpl :

<div>
  <section class="top">
    <div ui-view="top"></div>
  </section>

  <section class="middle">

    <section class="left">
      <div ui-view="left"></div>
    </section>

    <section class="main">
      <div ui-view="main"></div>
    </section>

  </section>
</div>

And these are the styles:



.top { background: #bcd;
position: absolute; height: 100px; width: auto; left: 0; right: 0; top: 0; bottom: auto;
}
.middle {
position: absolute; height: auto; width: auto; left: 0; right: 0; top: 100px; bottom: 0;
}
.left { background: #def;
position: absolute; height: auto; width: 200px; left: 0; right: auto; top: 0; bottom: 0;
}
.main { 
position: absolute; height: auto; width: auto; left: 200px; right: 0; top: 0; bottom: 0;
}

And this is states

for this simple application:

$stateProvider
.state('app', {
    url: '/app',
    views: {
      '@' : {
        templateUrl: 'layout.html',
      },
      'top@app' : { templateUrl: 'tpl.top.html',},
      'left@app' : { templateUrl: 'tpl.left.html',},
      'main@app' : { templateUrl: 'tpl.main.html',},
    },
  })
.state('app.list', {
    url: '/list',
    templateUrl: 'list.html',
  })
.state('app.list.detail', {
    url: '/:id',
    views: {
      'detail@app' : {
        templateUrl: 'detail.html',
        controller: 'DetailCtrl'
      },
    },
  })

Check here

+1


source






More articles:


All Articles