I have a question for the ionic framework, i hope someone can help me... I have an ion-list with "ion-item-right". This is all ok, the button is on the right. Now i need to have three other icons, which are centered, so that i have: text - 3 icons centered - 1 icon right
this is my code:
<ion-item
class="item-stable accordion item-icon-right"
ng-show="!skillHasSubskill(skill)">
{{skill.skillName}}
<i class="icon ion-star"></i>
<i class="icon ion-star"></i>
<i class="icon ion-star"></i>
<a class="button marginrighticon button-icon icon ion-close energized" ng-click="deleteSkill(skill)"></a>
</ion-item>
Of course, this isn´t working. The three "ion-stars" should be centered, but i haven´t found a tag by which i can do this... I hope someone can help me ;)
I think you have to do some CSS styling... like this:
<ion-item class="item-stable accordion item-icon-right item-button-right" ng-show="!skillHasSubskill(skill)">
{{skill.skillName}}
<div class="icon" style="margin-right: 80px">
<i class="ion-star"></i>
<i class="ion-star"></i>
<i class="ion-star"></i>
</div>
<a class="button button-icon" ng-click="deleteSkill(skill)">
<i class="icon ion-close energized"></i>
</a>
</ion-item>
for everyone with the same problem... the solution above is in many ways correct, but i had to adopt it a little bit... here´s my code:
<ion-item
class="item-stable accordion nopadding"
ng-show="!skillHasSubskill(skill)">
<div class="row">
<div class="col">{{skill.skillName}}</div>
<div class="col">
<i class="padding-right icon ion-star"></i> <i
class="padding-left padding-right icon ion-star"></i> <i
class="padding-left icon ion-star"></i>
</div>
<a
class="button button-icon button-right icon ion-close energized"
ng-click="deleteSkill(skill)"></a>
</div>
</ion-item>
i had to do it, because in the other way posted above the height of the ion-item was too big because the icons were interpreted in an own line, not in the same one as the normal text ;)
but thank you very much!
edit: i have another silly problem: the text isn´t aligned vertically... vertical-align:middle isn´ta solution (aligned to col & row)... has anyone an idea??
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.