Utilizing a simple UI Bootstrap alert to display error messages and more, I keep it hidden below a header at the top of my page by default. By using scope variables, I can customize the color and text and utilize ng-hide for hiding. Here's the alert HTML snippet:
<alert type={{alertType}} close="hideAlert = true"
ng-hide="hideAlert" class="ng-hide">{{alertText}}</alert>
An issue arises when the page loads as there seems to be an extra 20px of space occupied by the hidden alert. Upon inspecting the elements, the 'x' close button consumes 21px of space and remains unaffected by the alert shrinking. The console displays this:
<button ng-show="closeable" type="button" class="close" ng-click="close($event)">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
Similarly, the text element within the alert encounters a similar issue, taking up 20px of space, nested inside the 21px mentioned earlier. This is evident in the element console:
<div ng-transclude="">
<span class="ng-binding ng-scope">Default Alert!</span>
</div>
The CSS for both the alert and the hidden alert (alert.ng-hide) appears like this:
.alert {
-moz-transition: 0.5s linear all;
-o-transition: 0.5s linear all;
-webkit-transition: 0.5s linear all;
transition: 0.5s linear all;
display: block !important;
max-height:50px;
opacity: 1;
}
.alert.ng-hide {
display: block !important;
max-height:0px;
opacity: 0;
padding-top: 0;
padding-bottom: 0;
margin-top: 0;
margin-bottom: 0;
}
Any insights into why these alert components do not shrink when hidden?