Hello,
Using div bar and buttons, I’ve a problem with 2nd button overlaying the first one if the direction is RTL.
Here is a codepen in rtl
NB with standard ltr: codepen seems ok.
Tested on chrome, and samsung browser
As a noob in this great framework, I got other questions:
1 - why does the whole bar and list disapear if I don’t specify class="has-subheader"
in <ion-content>
?
2 - why is my first line (toto1) not displayed in <ion-item ng-repeat>
?
3 - is it possible to change the appearance of the sencond button to be badge like ?
thx in advance
code:
<ion-content class="has-subheader">
<div class="bar bar-positive button-bar">
<div class="buttons">
<button class="button button-icon icon "
ng-class="data.showCat ? 'icon ion-ios-minus-outline' : 'icon ion-ios-plus-outline'"
ng-click="data.showCat = !data.showCat"></button>
<div div class="h3 title" >שלום Collapsible menu</div>
<button ng-show="!data.showCat" class="button button-assertive"
ng-click="data.showCat = !data.showCat">
{{dataLinksCat.length}}</button>
</div>
</div>
<div id="idLinksCat" class="list" ng-show="data.showCat" >
<ion-item ng-repeat="item in dataLinksCat"
item="item"
href="{{item.url}}" >
{{ item.title }}
</ion-item>
</div>
</ion-content>
JS:
angular.module('ionicApp', ['ionic'])
.controller('MyCtrl', function($scope) {
$scope.data = {
showCat: false
};
$scope.dataLinksCat = [
{ url: 1, title: "toto1" },
{ url: 2, title: "toto2" },
{ url: "http://ionicframework.com", title: "ionic" },
{ url: "http://forum.ionicframework.com/", title: "forum" },
{ url: 5, title: "toto5" }
];
$scope.isShowCat = function() {
return $scope.showCat;
};
$scope.toggleShowCat = function() {
$scope.showCat=!$scope.showCat;
};
});