I am currently developing my inaugural Ionic application. The initial template I utilized was the rudimentary sidemenu layout.
$ ionic start myApp sidemenu
Afterwards, I crafted a straightforward page featuring a list which appears as follows...
<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>
The issue I'm facing pertains specifically to the <span class="item-note"> section. I sourced this code snippet from the examples provided by Ionic found here: http://ionicframework.com/docs/components/#item-icons. In their example, the note text aligns perfectly with the right edge, whereas in my implementation there seems to be excessive padding. Upon inspecting the source code, it seems to stem from this portion...
.item-complex .item-content, .item-radio .item-content {
position: relative;
z-index: 2;
padding: 16px 49px 16px 16px;
border: none;
background-color: #fff;
}
While I understand that I could potentially create custom CSS rules to override this, my preference is for it to function as depicted in their example without requiring manual adjustments from my end. Was there an error made in the markup? Could this possibly be a bug or oversight? How can I eliminate the extraneous 49px gap on the right-hand side to mirror their intended design? Appreciate any insights! Thanks!