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

Popular posts from this blog

c# - Validate object ID from GET to POST -

node.js - Custom Model Validator SailsJS -

php - Find a regex to take part of Email -