離子範圍和徽章重疊

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>

來源

2016-02-05 UniSound Waterloo

嘗試CSS。離子不提供所有可能的使用選項 – niklas

@unisound，您正在調試的平臺是什麼？ Android或ios？ – Webruster

我使用git bash然後$ ionic服務。我沒有嘗試在手機上運行它。我用鉻來運行它。我可以選擇模擬Iphone 6 –

您觀察到的是離子中徽章的正常行爲：它們與組件重疊。

這是自定義徽章CSS類，這是更類似於圖標的例子：

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>

來源

2016-02-05 07:44:19 beaver

離子範圍和徽章重疊

回答

相關問題