Card divs generated with ng-repeat within a template are not filling the full screen

ionic-v1
1

Hi All,

I have a nav-view which is loaded with a template. The template has ng-repeat. The div cards generated through the ng-repeat are filling the full screen width - it only takes the size of the content within the div, whereas div cards generated normally are easily filling the full screen. Please help.

Edited the post as I had mentioned scaling as an issue, which isn’t true - as scaling browser window makes the lists scale correctly.

    <div class="row">
            <div class="col">                    
                <div class="card">
                    <div class="item item-text-wrap">
                        APP1
                    </div>
                </div>
            </div>

<!-- 2 more like the above columns-->
    </div><!--End of row div -->    

<!-- 1 more row like the above code-->



<div ng-repeat="val in items">
    <div class="row">
        <div ng-repeat="val in items">

        
            <div class="col">                    
                <div class="card">
                    <div class="item item-text-wrap">
                        APP{{val}}
                    </div>
                </div>
            </div>


        </div><!--End of ng-repeat div -->
    </div><!--End of row div -->    
</div><!--End of ng-repeat div -->

2

Being a newbie, I am not able to make it work. Can anyone help with this?

3

You shouldn’t have those seperate divs for the repeats.

It will work if you do it like this:

<div class="row" ng-repeat="val in items">
    <div class="col" ng-repeat="val in items">
        <div class="card">
            <div class="item item-text-wrap">
                APP{{val}}
            </div>
        </div>
    </div>
</div>
2 Likes
4

Thanks thijs. That worked. The problem is, as I am a newbie in both HTML and angularjs + ionic, personally, there is a feeling that the documentation aren’t enough to teach a newbie like me the skills to make wholesome apps.

Anyway, your answer was bang on. Wish there was a stackoverflow kinda option to mark your reply as answer. Thumbs up.

5

How is this different for ion-list?