Div collapses on ng-show

Question

I have something like the following:

<div>
    <h4 data-ng-show='showMe'>I am showing</h4>
</div>

The height of the containing div is being adjusted depending on whether the h4 element is shown or is hidden.

Is there a way to make it so that the div has a constant height? Would I use min-height or is there another way to do this?

Answer 1

How about:

  <div>
      <h4><span data-ng-show='showMe'>I am showing</span>&nbsp;</h4>
   </div>

Answer 2

You should add a min-height rule to the parent <div> . The docs for ng-show state that the directive adds or removes the .ng-hide class which:

The .ng-hide CSS class is predefined in AngularJS and sets the display style to none (using an !important flag)