I am working with three columns in Bootstrap, all set to col-md-4 width. The middle column has an ng-show attribute that may hide it at times. When the rightmost column becomes visible due to friend requests, it displaces the middle column if it's hidden. How can I make sure the middle chatWindow column still occupies space even when hidden?
<div class="row">
<div class="col-md-4 friendListWindow" ng-init="getFriends()">
Friends List
<form ng-submit='addFriend(username)' name='addFriendForm'>
<input type='text' name='username' ng-model='username' required/>
<input type='submit' ng-disabled='!addFriendForm.$valid' value='Add Friend'>
</form>
Online Friends
<ul>
<span ng-repeat='friend in friends track by $index | orderBy:"name"' ng-click='startChat(friend)'>
<li ng-if='friend.online'>
<span class='friendService'>{{friend.service}}</span>
<span class='friendName'>{{friend.name}}</span>
</li>
</span>
</ul>
</div>
<div class="col-md-4 chatWindow" ng-show="activeFriend">
<div class="activeFriendBox">Chat with {{activeFriend.name}}</div>
<div class="messages">
<div ng-repeat='message in activeFriend.messages track by $index | orderBy:"timeStamp"'>
<span>{{message.from}}</span>
<span>{{message.message}}</span>
<span>{{message.timestamp}}</span>
</div>
</div>
<div class="sendMessage">
<form ng-submit='sendMessage(messageText)' name='messageForm'>
<input type='text' name='message' ng-model='messageText' required/>
<input ng-disabled='!messageForm.$valid' type='submit' value='send'/>
</form>
</div>
</div>
<div class="col-md-4 friendRequestsWindow">
<div class="friendRequests">
<ul>
<li ng-repeat='friend in friendRequests track by $index'>
<span>New friend Request from: {{friend}}</span>
<button ng-click='acceptFriendRequest(friend)'>Accept</button>
<button ng-click='ignoreFriendRequest(friend)'>Ignore</button>
</li>
</ul>
</div>
<div class="acceptedFriendRequests">
<ul>
<li ng-repeat='friend in acceptedfriendRequests track by $index'>
<span>{{friend}} accepted your friend request</span>
<button ng-click='acknowledgeFriendRequest($index)'>Acknowledge</button>
</li>
</ul>
</div>
</div>
</div>