CODEWITHSUNDEEP
cssangularjs
niran
niran

Reputation: 1980

ng-view height issue in angularJS?

I am using ng-view, to display view based on the routeProvider. In my application, ng-view added like this 

<div ng-view  style="height: 100%; background:#000000;"></div>.

In one of my views, there is a left navigation, which should displayed 100% in height in the browser. For some reason, left view navigation height is created only based upon the data. That is if data is more, height is incremented.

enter image description here

I am not sure, why height is not incremented even though I set hieght=100%, here is the code of Left navigation

<div class="options1"> 



 <div class="options"> 
         <a ng-repeat="name in list" >{{name.name}}</a>
    </div>

</div >

.options {
    background:#FFFFFF;

    min-height: 190px;

    width:10em;

    height:100%;

    border: 1px solid red;

    color:#FFFFFF;

}

.options1 {
    min-height:100%; 

    background:red;

    width:15em;


}`

Upvotes: 0

Views: 12975

Answers (4)

Gor
Gor

Reputation: 1435

use Viewport Height, it's absolutely 

style="height: 100vh;"

Upvotes: 3

Zhang YH
Zhang YH

Reputation: 41

I think css:

.ng-scope{
    height: 100% !important;
}

On my computer it works correctly, for reference only

Upvotes: 0

niran
niran

Reputation: 1980

I got it working, it is an CSS issue. I have added this into CSS,

html, body { height: 100%; width: 100%; margin: 0; }.

Here is the link for more details

Css height in percent not working

Upvotes: 4

Tiago Rold&#227;o
Tiago Rold&#227;o

Reputation: 10649

This isn't an angularJS issue, but most likely a CSS styling issue. If it is so, then you need to investigate it as such - there isn't much information to go on in your question, but a div stretches to 100% of it's parent, so you need to make sure that is happening. Also, positioning is very important.

If this is the case, there is no need to duplicate an answer - see if this other SO answer is of any help.

Upvotes: 2

Related Questions