TechQA.

AngularJS + Phonegap app: Views fill 100% height

3.5k views Asked by At

I'm building an android app with phonegap using angularJS + topcoat. I managed creating the index page, views and all the basic structure. My question is, there is some pages(partials) that doesn't have data to show. In that case, the view does not fill the height of the page. That makes a problem because I have a drawer menu hidden usin angular-snap. Because the page doesn't fill all the available height, the menu that is supposed to be hidden is visible. Does anybody know how to handle this situation? I'm attaching a image to examplify! app-example Thank you!

css angularjs cordova topcoat
Original Q&A
2

There are 2 answers

2
Nicolas ABRIC On BEST ANSWER

Why don't use the css min-height property. Assume every page of your app is wrapped inside a div as follow :

<div classs="page">
  //your page content
  ...
</div>

You can then create the following CSS rule

.page {
  min-height :100%;
}

that will ensure that even if the height of your content is less than the total height of your screen it will occupy 100% of the page's height.

0
jpgrassi On

I managed solving the problem with Nicolas help. It didn't worked in the beginning because I was setting the new style on the partial's div. After trying for a while I set the class on the "main" div which holds the ng-view directive and it worked. Just an example in case others have the same issue:

<body ng-controller="MainCtrl"> 
    <div snap-content snap-options="snapOpts" class="page">
        <div ng-view ng-class="slide"></div>
    </div>
</body>

.page {
   min-height :100%;
   background:inherit;
}

Note: I had to set a background for the page class otherwise it won't work.

Related Questions in CSS

Related Questions in ANGULARJS

Related Questions in CORDOVA

Related Questions in TOPCOAT

Popular Questions

Trending Questions