CODEWITHSUNDEEP
cssionic-framework
JQuery Mobile
JQuery Mobile

Reputation: 6301

Right Align List Item Content in Ionic Framework

I am building an app with the Ionic Framework. It uses AngularJS and CSS. In my app, I need to display a list of items. Each item needs to look like the following:

+------------------------------------------+
| Item Title                         123   |
| one line of text                         |
| a seperate line of text                  |
+------------------------------------------+

I have everything working, except for the right-aligned number. The numbers are actually a ul. This is by design. They will be font icons that are colored differently. For now, I'm just trying to get the positioning to work. Currently, I'm trying the following:

<div class="list">
  <a class="item" style="left:0; right:0" ng-repeat="item in items">
    <h2>{{item.title}}</h2>
    <p class="second-point">{{item.textA}}</p>
    <p class="third-point">{{item.textB}}</p>

    <ul class="row">
      <li class="col">1</li>
      <li class="col">2</li>
      <li class="col">3</li>
    </ul>
  </a>              
</div>

When this gets rendered, the numbers appear on a line underneath the first three text items. The ul is not right aligned. How do I get the component to be right-aligned?

Thank you!

Upvotes: 2

Views: 17063

Answers (1)

AlexDom
AlexDom

Reputation: 701

You can achieve that with float: right on your ul, then apply display:inlineon li (or float:left or display:inline-block) there many possibilities but inline seems to be easyiest to me for your situation. Last point your must change position of your ul because of float, you must put floating element at first inside parent block.

<div class="list">
    <a class="item" style="left:0; right:0" ng-repeat="item in items">
        <ul class="row">
            <li class="col">1</li>
            <li class="col">2</li>
            <li class="col">3</li>
        </ul>
        <h2>{{item.title}}</h2>
        <p class="second-point">{{item.textA}}</p>
        <p class="third-point">{{item.textB}}</p>
    </a>              
</div>


    /*ul*/.row {
        float:right;
    } /* no need to precise your selector just a reminder */

    .row > li {
        display:inline;
    } /* selector for the "first child" li of ul, don't gonna apply on
    li inside your li, of course your can use .col like selector */

Upvotes: 2

Related Questions