Padding Issue with ion-list

ionic-v1
1

I am having an issue that I am having no luck with. I have an ion-list that I really only want to display an image, the full width of the display. Then I want to enable swiping to expose a “follow” button. The issue I am having is that when using an ion-list, I am getting lots of extra padding on the top, bottom, and left, and a ton of extra padding on the right.

I am able to get the look I want by using a div with class=“list”. However, I am unsure how to get the swipe to work with that method. Here is an image of my issue. The top two items are using an ion-list, and I am showing you the swipe working. The bottom two items are using the div/class=“list”. The spacing is the way I want the ion-list to be, however, I cannot get the div version to work with swipe. Can anyone provide me with some assistance to either get the ion-list version spacing like the div version, or help me get swipe support for the div version? (Source code follows the image… I didn’t include any CSS, because I am working with the default CSS that comes with ionic out of the box).

Thanks! Bob

image
issuewithpadding.png429×650 9.36 KB 

<ion-content>
  <ion-list>
  <ion-item ng-repeat="item in data.items" href="#/tab/friend/{{col.id}}">
      <img ng-src="{{item.title}}" style="width:100%">
      <ion-option-button class="button-positive" ng-click="">
        Follow
      </ion-option-button>
  </ion-item>
  </ion-list>

  <div class="list">
    <div ng-repeat="item in data.items">
      <img ng-src="{{item.title}}" style="width:100%">
   </div>
  </div>

</ion-content>
1 Like
2

The padding is caused by <ion-item> wrapping the content in a div with the class item-content. You can remove the padding like this:

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

Or you can add a custom class to <ion-item> and use that class instead of .item.

<ion-item class="my-item"></ion-item>

CSS

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

Are you using the browser to view your project?

2 Likes
3

Thanks for the tip, i will give that a try. I was just using CodePen to test things out quickly. I normally am using the ios emulator. Do you have other suggestions on how to see changes real time other than something like codepen? I was just trying to avoid having to build over and over then emulate.

4

The solution you provided works fantastic. You rock, many thanks!

5

You’re welcome. I recommend using ionic serve from the command line. It opens a browser on your local machine with live reload so as you make changes to your project it will update. This also makes it easy to inspect element and debug. Codepens are pretty helpful for bits of projects. Let me know if you need further information on serve. I’m posting this from mobile but I can get you a guide if so.

6

Hi, i have the this issue, but am unable to fix it with @brandyshea 's solution. Any other solution?

7

In my case i’m using directives like so:

<ion-item collection-repeat="item in items">
     <my-dir></my-dir>
<ion-item>
8

Could you put together a code example? It’s hard to help without knowing what the <my-dir> directive is and what classes are being applied.

9

Nevermind. I set the .item css alone, and it works.
Thanks.