离子范围和徽章重叠

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

离子范围和徽章重叠

回答

相关问题