Question

我正在尝试按下onClick()按钮，按下该按钮会显示文字。我的问题是，当我点击按钮时，按钮会在文本显示时向下滑动。

当文字出现时，有没有办法让按钮不动？也许让它实际上在那里，但隐藏和按钮取消隐藏它？我不知道，按下按钮时我不想让它移动。

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 1

一种方法是修复文本div coin-result的高度并为其overflow-y: auto。这可确保按钮保持不变。

演示如下：

＆＃13;

.button-calm {
  width: 50%;
}
.coin-result {
  text-align: center;
  line-height: 100px;
  height: 100px;
  overflow-y: auto;
}
.centerItems {
  margin-left: auto;
  margin-right: auto;
}

＆＃13;

<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>

＆＃13;

让我知道您对此的反馈。谢谢！

中心按钮和文本发布HTML

1 个答案: