Ionic Material issue with item class

Question

I am working with Ionic material demo app and I am facing with some issue .When i am Not using "item class" then everything will be ok but UI is not as expected because I am not using that class.code is as following

        <div class="list half" >
        <div  class="card card-gallery item-text-wrap" ng-repeat="picsItem in myPics" > *<!-- no item class here -->*    
            <div class="ink dark-bg">
                <h2>{{picsItem.Title}}</h2>
                <img ng-src="{{picsItem.Image}}" class="full-image" ng-last-repeat="mylist">
            </div>
            <div class="tabs tabs-secondary tabs-icon-left"> *<!-- no item class here -->*
                <a class="tab-item stable-bg assertive">
                    <i class="icon ion-heart"></i>
                    {{picsItem.Like}}
                </a>
                <a class="tab-item stable-bg positive-900">
                    <i class="icon ion-chatbubbles"></i>
                    {{picsItem.Comment}}
                </a>
            </div>
        </div>
    </div>

When I am Using "Item Class" (as per the demo app)then i am facing issue Uncaught TypeError: Cannot read property 'className' of undefined and nothing display. I have created a Pen for this ( https://codepen.io/anujsphinx/pen/jVqvaV) . I tried some solution(https://github.com/zachfitz/Ionic-Material/issues/46) but didn't get success .Need result with item class

<div class="list half" >
        <div  class="item card card-gallery item-text-wrap" ng-repeat="picsItem in myPics" >                  
            <div class="ink dark-bg">
                <h2>{{picsItem.Title}}</h2>
                <img ng-src="{{picsItem.Image}}" class="full-image" ng-last-repeat="mylist">
            </div>
            <div class="item tabs tabs-secondary tabs-icon-left">
                <a class="tab-item stable-bg assertive">
                    <i class="icon ion-heart"></i>
                    {{picsItem.Like}}
                </a>
                <a class="tab-item stable-bg positive-900">
                    <i class="icon ion-chatbubbles"></i>
                    {{picsItem.Comment}}
                </a>
            </div>
        </div>
    </div>

I have created 2 more pen to resolve confusion

http://codepen.io/anujsphinx/pen/yVOdad this is default code without ng-repeat (and item class in div) . This type design i want with ng-repeat.
http://codepen.io/anujsphinx/pen/yVOdJd this is code with ng-repeat (if i remove item class in <a href="#/app/profile" class="item item-avatar item-icon-right" ng-repeat="relatives in myRelative">then it will work but not properly).

The code in your pen doesn't seem to generate any errors. You're going to want to include your actual code here; the code that you're using that is causing this error, in full. — Makoto, Nov 14 '16 at 07:15
@AnilKumarRam check again . It is opening . Check again https://codepen.io/anujsphinx/pen/jVqvaV — Anuj, Nov 14 '16 at 07:29
className' of undefined is not a problem, its showing in both the cases... — Anil Kumar Ram, Nov 14 '16 at 07:31
@Makoto Now check pen .At that time i didn't use item class there .I only use comment that i am not using item class. Don't downgrade question if you didn't check properly .Thanks — Anuj, Nov 14 '16 at 07:31
@AnilKumarRam that is ok but i need solution for that ,Did you get my problem? — Anuj, Nov 14 '16 at 07:32
yes i m checking your code... ng-repeat is hiding after adding class — Anil Kumar Ram, Nov 14 '16 at 07:33
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/128035/discussion-between-anil-kumar-ram-and-anuj-gupta). — Anil Kumar Ram, Nov 14 '16 at 09:06

score 0 · Answer 1 · answered Nov 14 '16 at 07:48

0

Basically problem is not with 'item' class you can remove 'animate-fade-slide-in' and its working fine...

ionicMaterialMotion.pushDown({
        selector: '.push-down'
    });
    ionicMaterialMotion.fadeSlideInRight({
        selector: '.animate-fade-slide-in .item'
    });

so .animate-fade-slide-in .item affecting your code..

answered Nov 14 '16 at 07:48

Anil Kumar Ram

1,211
11
14

you can try with pen too, I have already tried it but no luck. https://codepen.io/anujsphinx/pen/jVqvaV – Anuj Nov 14 '16 at 07:57
**.animate-fade-slide-in .item** class hiding the item class element.. so you can rename https://codepen.io/anon/pen/qqZGGb – Anil Kumar Ram Nov 14 '16 at 08:00
Thanks but if i will remove item2 class from html then it will also work ,check once, I need design like http://ionicmaterial.com/ .check demo app design and gallery menu , – Anuj Nov 14 '16 at 08:11

Ionic Material issue with item class

1 Answers1