离子范围和徽章重叠

Question

Please refer to this image 我正在尝试离子框架。我看到传统上范围滑块是图标滑块图标。但是，我想要图标滑块徽章。徽章显示滑块的值。目前有重叠。有人知道怎么解决吗？

<div class="item range range-{{selection.secondary}}">
          <i class="icon ion-ios-timer"></i>
          <input type="range" name="volume" min="0" max="10" ng-model="count">
          <i class="badge badge-royal">5</i>
</div>

Answer 1

您观察到的是 Ionic 中徽章的正常行为：它们与组件重叠。

这里有一个自定义徽章的例子CSS class，它更类似于图标：

angular.module('ionicApp', ['ionic'])

.controller('MainCtrl', function($scope) {
  $scope.count=5;
});

.mybadge.badge-royal {
    background-color: #886aea;
    color: #fff;
}

.mybadge {
    background-color: transparent;
    color: #AAAAAA;
    z-index: 1;
    display: inline-block;
    padding: 3px 8px;
    border-radius: 10px;
    vertical-align: baseline;
    text-align: center;
    white-space: nowrap;
    font-weight: bold;
    font-size: 14px;
    line-height: 16px;
    -webkit-box-flex: 0;
    -webkit-flex: 0 ;
    -moz-box-flex: 0;
    -moz-flex: 0;
    -ms-flex: 0;
    flex: 0;
    display: block;
    min-width: 24px;
}

<html ng-app="ionicApp">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  <title>Badges</title>
  <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
  <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>

<body ng-controller="MainCtrl">

  <ion-header-bar class="bar-positive">
    <h1 class="title">Badges</h1>
  </ion-header-bar>

  <ion-content>

    <div class="list">

      <div class="item item-divider">
        Original Ionic badge
      </div>

      <div class="item range range-{{selection.secondary}}">
        <i class="icon ion-ios-timer"></i>
        <input type="range" name="volume" min="0" max="10" ng-model="count">
        <span class="badge badge-royal">5</span>
      </div>

      <div class="item range range-positive">
        <i class="icon ion-ios-sunny-outline"></i>
        <input type="range" name="volume" min="0" max="100" value="33">
        <i class="icon ion-ios-sunny"></i>
      </div>

      <a class="item item-icon-left" href="#">
        <i class="icon ion-person-stalker"></i> Friends
        <span class="badge badge-assertive">0</span>
      </a>
      
      <div class="item item-divider">
        Custom badge for slider
      </div>
      
      <div class="item range range-positive">
        <i class="icon ion-ios-timer"></i>
        <input type="range" name="volume" min="0" max="10" ng-model="count">
        <i class="mybadge badge-royal">{{count}}</i>
      </div>

    </div>

  </ion-content>

</body>

</html>

离子范围和徽章重叠

Ionic range & badge overlap

css

jquery

angular-ui-bootstrap

ionic-framework