Grid system inside ion-item

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

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.

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

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

Nothing happens. The problem still remain.
Thank you

Which device do you use for the test?

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