Austin Hunter Austin Hunter - 1 month ago 6
CSS Question

Center button and text issues HTML

I am trying to make a

onClick()
button that when pressed, makes text show. My issue is that when I click the button, the button scoots down when the text shows up. Is there a way to make the button not move when the text appears? Maybe make it actually be there but hidden and on button unhide it? I don't know, I just don't want it to move when the button is pressed.

angular.module('starter.controllers', ['ionic'])

.controller('HomeCtrl', function($scope) {
$scope.flip = function() {
$scope.coinResult = "Heads";
}
})


<body ng-app="starter">
<head>
<style>
.button-calm {
width: 50%;
}
.coin-result {
text-align: center;
line-height: 100px;
}
.centerItems {
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<ion-content>
<div class="centerItems">
<p class="coin-result" ng-bind="coinResult"></p>
<button class="button button-outline button-calm" ng-click="flip()">Flip!</button>
</div>
</ion-content>
</body>

Answer

One way would be to fix the height of the text div coin-result and give it overflow-y: auto. This ensures that the button stays put.

Demo below:

.button-calm {
  width: 50%;
}
.coin-result {
  text-align: center;
  line-height: 100px;
  height: 100px;
  overflow-y: auto;
}
.centerItems {
  margin-left: auto;
  margin-right: auto;
}
<div class="centerItems">
  <p class="coin-result" ng-bind="coinResult">Lorem ipsum dolor sit amet, consectetur adipisicing elit<br/>Lorem ipsum dolor sit amet, consectetur adipisicing elit<br/>Lorem ipsum dolor sit amet, consectetur adipisicing elit<br/>Lorem ipsum dolor sit amet, consectetur adipisicing elit<br/>Lorem ipsum dolor sit amet, consectetur adipisicing elit<br/>Lorem ipsum dolor sit amet, consectetur adipisicing elit<br/>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
  <button class="button button-outline button-calm" ng-click="flip()">Flip!</button>
</div>

Let me know your feedback on this. Thanks!

Comments