ng-show alters min-height in div

Question

I have a div that has a class of wrapper. Inside it has a parent div with a class of content-wrapper. The wrapper div has an ng-show that returns true/false.

<div class="wrapper" ng-show="firebaseUser">
   <% include ../partials/nav.ejs %>
   <div class="content-wrapper">
      <ng-view></ng-view>
   </div>
   <% include ../partials/footer.ejs %>
</div>

The content-wrapper has just a little bit of css that makes it fit the entire screen. Just in case it helps I've included the parent styles as well.

.wrapper {
    min-height: 100%;
    position: relative;
    overflow: hidden;
}

.content-wrapper, .right-side {
    min-height: 100%;
    background-color: #ecf0f5;
    z-index: 800;
}

Now, when I use the ng-show the screen scrolls farther than the height of the window.

If I inspect (and then refresh the page) it (.content-wrapper) looks like on page load it's given a style of min-height: 532px;.

If I inspect the page with no page refresh. Meaning it readjusts to the new window height it's given a style of min-height: 422px;.

If I don't use the ng-show the screen always fits the window and I have no problems.

What is ng-show adjusting and how do I fix this issue?

P.S. I've tried using ng-if instead and the result of that is the entire screen is very short and small. So, worse than ng-show.

Are you actually using jQuery? You've tagged it but not mentioned it in your question? — Mark, Jun 10 '16 at 00:22
I have removed the tag. Thank you for the notice of mistake. — Mitch Evans, Jun 10 '16 at 00:42

score 0 · Answer 1 · edited May 23 '17 at 12:15

0

This is simply not the way to work with angular. Strongly suggest reading Thinking in angular when I have a jQuery background

edited May 23 '17 at 12:15

Community

1
1

answered Jun 10 '16 at 00:16

Johan

159
1
9

This is a theme I'm trying to implement. Maybe show an example of the "correct" way to do so. I've thought about changing the includes into directives. But not sure how that would change the issue. – Mitch Evans Jun 10 '16 at 00:41

score 0 · Answer 2 · answered Jun 10 '16 at 00:20

0

I'm not sure fully if angular's to blame here.

Looking at your css the parent needs to have a height of 100% for the child to have the full height of the parent.

.wrapper {
    height: 100%;
    min-height: 100%;
    position: relative;
    overflow: hidden;
}

.content-wrapper, .right-side {
    min-height: 100%;
    background-color: #ecf0f5;
    z-index: 800;
}

or have an in-depth read of this

answered Jun 10 '16 at 00:20

Mark

2,061
1
16
26

@MitchEvans try and actually set values like on wrapper set a hight of 400px and on content-wrapper set height 100%. And just see if that works – Mark Jun 10 '16 at 00:44
That does remove the scroll. – Mitch Evans Jun 10 '16 at 01:19
I just don't understand why it doesn't do it when i'm not using ng-show – Mitch Evans Jun 10 '16 at 01:19
@MitchEvans its because the child needs to know what the parents height is. Look read the link in my answer, that will help you setup the css correctly. – Mark Jun 10 '16 at 01:21
I see nothing talking about Height. Just width. – Mitch Evans Jun 10 '16 at 01:41
Re-reading your answer, I'm not sure you understand my problem. The divs are going pas the height of my window so I'm having to scroll. Your answer makes it sound like you're trying to make it taller. – Mitch Evans Jun 10 '16 at 01:48

ng-show alters min-height in div

2 Answers2