Ionic Angular ion-content Padding Issue

Question

I am working on my first Ionic app. I started with the basic sidemenu template.

$ ionic start myApp sidemenu

From there I created a simple page with a list, it looks like this...

<ion-view view-title="Players">
  <ion-nav-buttons side="right">
    <button class="button button-positive" ng-click="doSomething()"> Learn More</button>
  </ion-nav-buttons>
  <ion-content>
    <ion-refresher
      pulling-text="Pull to refresh..."
      on-refresh="doRefresh()">
    </ion-refresher>
    <ion-list can-swipe="listCanSwipe">
      <ion-item class="item-icon-left" ng-repeat="player in players" href="#/app/players/{{player.id}}">
          <i class="icon ion-ios-contact"></i>
          {{player.fname}} {{player.lname}}
          <span class="item-note">
            {{player.city}}, {{player.state}}
          </span>
          <ion-option-button class="button-positive" ng-click="share(item)">
            [Option 1]
          </ion-option-button>
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

My question is specifically about the <span class="item-note"> part. I got this example code from Ionic's examples here: http://ionicframework.com/docs/components/#item-icons . In their example you can see the note text is all the way to the right edge but in my page there is a lot of padding. I viewed source and it appears to be coming from here...

.item-complex .item-content, .item-radio .item-content {
    position: relative;
    z-index: 2;
    padding: 16px 49px 16px 16px;
    border: none;
    background-color: #fff;
}

I know I could write my own css to override this but I'd rather it just work like in their example without me tinkering with it. So did I do something wrong in the markup? Is this a bug? How do I get rid of this 49px gap on the right side so it looks like their example? Thanks!

Answer 1

In this case in your template template you are use </ion-option-button> .

So for that its adding extra padding from right side in ion-item.

If you remove that one you get the exact result , in example option button not there.

Due to this .item-radio class are added.

If you will required that one so may be you need to your customized css.

Hope this will help you !