Ng-href auto generates an <a> tag inside <ion-item> lists, how to remove padding from <a>?

1

I have a list of items in an <ion-item> list generated by an ng-repeat

            <ion-item ng-repeat="bla in blah" ng-href="#/somewhere">
               <div>stuff</div>
            </ion-item>

This generates code on the page that looks like:

            <ion-item ng-repeat="bla in blah" ng-href="#/somewhere">
             <a class="item-content">
               <div>stuff</div>
             </a>
            </ion-item>

That <a> tag has massive amounts of padding, so what’s the best way to get rid of it?

2

You can use

.item .item-content {
  padding: 0 !important;
}

or put a custom class on ion-item (if you don’t want to change all items in your project) and use that instead of .item

1 Like
3

Ok question, wouldn’t giving ion-item it’s own custom class be the same as doing some inline styling using style="blah"? I always do that first naturally but obviously can’t for a generated tag.

I guess I was wondering if there was some other way to change it other than changing all items across the project?

4

Giving it a custom class is so you can modify the child .item-content class without changing all items across the project. You can’t modify the generated child with inline styling. I also try to avoid inline styling.

HTML

<ion-item ng-href="#" class="custom-item">Item</ion-item>

CSS

.custom-item .item-content {
    padding: 0 !important;
}
1 Like
5

Ok, so there is also $item-padding, the scss variable, I think I might just change that and then edit all my other lists by adding more padding where needed, better strategy to start with less and add more IMO.

Thanks also for your tips!!

1 Like