css - First element in ng-repeat behaving differently (it should not) -
firstly, unable reproduce issue on plunker, attempt linked here: http://plnkr.co/edit/yfe07e
i have ng-repeat repeats a-z , displayed buttons, user click filter results.
the letters arranged in table display horizontally, filling available width. works b-z... not show animation effect. if watch via ng-click indeed register click, not animate click rest of letters.
i don't know why i'm unable reproduce issue on plunker, hoping can point me in right direction.
<ion-view view-title="title"> <ion-header-bar class="header-bar stable-bg"> <img src="content/img/logo.png" class="logo"> <span class="royal">title</span> <div class="time royal">{{gettime()}}</div> </ion-header-bar> <ion-content class="energized-bg"> <div class="letter-repeater stable-bg"> <span ng-repeat="letter in letters" class="button button-outline button-royal">{{letter}}</span> </div> </ion-content> </ion-view>
css in question:
.letter-repeater { z-index: 2; height: 15px; width: 100%; display: table; table-layout: fixed; } .letter-repeater > span { width: 100%; height: 100%; display: table-cell; text-align: center; vertical-align: middle; }
1) why first element in ng-repeat not animating on click rest work perfectly?
update
i have tried isolate what's going on here recreating on plnkr have yet successful; try explain nesting of view in question , stack below.
the html near top of post root of home.html
index.html has <body ng-app="myapp"> <ion-nav-view></ion-nav-view> </body>
no css
the view governed ionic->angular ui-router, below
.state('home', { url: '/', views: { '': { templateurl: 'app/home/home.html', controller: 'homecontroller' } } })
as can see, nothing terribly interesting. customizations on ionic's scss color variables. further, have poured through elements in browser ensure there's no overlap, , i've found pushed behind z-index.
i using ionic, angularjs, cordova, jquery
the issue presents when viewing in browser or on device
Comments
Post a Comment