I am facing an issue where the top div containing a title and a button fades away when clicked, revealing the bottom text. However, once the button disappears, the top div shrinks and the bottom div gets shifted upwards, leading to an undesirable layout.
How can I keep the top div fixed in height even after the button disappears?
I have thought of some solutions like placing an invisible element with the same height as the button to maintain space, but it doesn't feel elegant. Another option is setting a fixed height for the top div, but that may not be responsive on different screen sizes.
What would be a simple and elegant solution to this problem?
<div class="jumbotron">
<h1><span class="hometitle">title</h1>
<button class="btn btn-primary animate-show" type="button" ng-click="ctrl.showPoll = true" ng-show="!ctrl.showPoll">click here to show question</button>
</div>
<div class="row marketing">
<div class="col-lg-12">
<form name="votForm" ng-show="ctrl.showPoll" ng-controller="frmCtrl as frm" ng-submit="frm.addVote(votForm.$valid)" novalidate>
<p>question</p>
<input ng-model="frm.vote" type="radio" name="myVote" value="1" required>op 1<br>
<input ng-model="frm.vote" type="radio" name="myVote" value="2">op 2<br>
<input ng-model="frm.vote" type="radio" name="myVote" value="3">op 3<br>
<input ng-model="frm.vote" type="radio" name="myVote" value="4">op 4.<br>
<input type="submit" value="submit" name="click me" >
<div class="panel" ng-show="frm.showError">Please select an option before submitting </div>
</form>
</div>
</div>
js
app.controller('votCtrl', ['$cookies', function($cookies){
var showPoll = false;
this.hasVoted = $cookies.iVoted || "nustiu";
}]);
css
.animate-show {
opacity: 1;
}
.animate-show.ng-hide-add.ng-hide-add-active,
.animate-show.ng-hide-remove.ng-hide-remove-active {
-webkit-transition: all linear 1s;
transition: all linear 1s;
}
.animate-show.ng-hide {
opacity: 0;
}