I am encountering an issue with a div that has the class of wrapper. Inside this div, there is a parent div with the class of content-wrapper. The wrapper div includes a conditional directive ng-show which toggles between displaying or hiding its content.
<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 been styled to fit the entire screen using CSS. I have also included the CSS styles for the parent elements.
.wrapper {
min-height: 100%;
position: relative;
overflow: hidden;
}
.content-wrapper, .right-side {
min-height: 100%;
background-color: #ecf0f5;
z-index: 800;
}
However, when I toggle the ng-show, the screen extends beyond the window height, causing scrollbars to appear. Upon inspecting the element on page load, I noticed it is assigned a style of min-height: 532px;. When adjusting the window height without refreshing the page, the style changes to min-height: 422px;.
Interestingly, if I remove the ng-show directive, the screen fits perfectly within the window dimensions without any issues. I attempted using ng-if as an alternative, but it resulted in the screen appearing unusually short and compact.
I am seeking assistance in understanding why ng-show is affecting the layout and how I can resolve this scrolling issue.
P.S. My attempt at using ng-if worsened the problem by making the entire screen appear much smaller than expected.