Grid system inside ion-item

ionic-v1
1

Hi guys,
I can’t figure out why my grid system that I’m trying to build inside a list doesn’t work.

I have to put some “tags” inside a column that belong to an item:

<ion-item>
                <div class="row responsive-sm">
                    <div class="col">
                        <strong>Materie</strong>
                    </div>
                    <div class="col padding">
                        <div class="row responsive-sm">
                            <div ng-if="materieArray && infoDelibera.categories" class="col col-33 padding" ng-repeat="materia in infoDelibera.categories">
                                <button class="button button-small button-dark icon-left ion-pound">{{materia.nome}}</button>  
                            </div>
                            <div ng-if="!materieArray && infoDelibera.categories" class="col col-33 padding">
                                <button class="button button-small button-dark icon-left ion-pound">{{infoDelibera.categories.nome}}</button>  
                            </div>
                        </div>
                    </div>
                </div>
            </ion-item>

and the result is (the materie row) is that the buttons are overlapped and don’t respect the column boundaries. Why this happens?

Thank you

2

What is the “padding” class? And what is the count of infoDelibera.categories? Because I’m not sure that responsive-sm works well if you use col-33 and, I’m not sure that col-33 works well if you haven’t exactly 3 columns.

3

Padding is described here: Padding

The class=“row responsive-sm” should make possible to flow the columns if there don’t fit inside the row (Responsive ROW)

The numbers of categories may be bigger than three.

Many Thanks

4

Maybe you can try to remove col-33 and see what happens…

5

Nothing happens. The problem still remain.
Thank you

6

Which device do you use for the test?

7

iPad mini, but I’ve the same problem with the emulator.