CODEWITHSUNDEEP
ionic-framework
Rishi
Rishi

Reputation: 3539

Ionic 1 card view show two rows

I need to show two rows of data in Ionic 1 list card view but i am not been able to achieve this. I have used two div to add two rows but its not working.

<div class="row row-responsive">
<div class="col">
    <div class="row row-responsive item item-divider">
        <div class="col " align="center">
            Last Name
        </div>
        <div class="col " align="center">
            First Name
        </div>
        <div class="col " align="center">
            Middle Name
        </div>
        <div class="col " align="center">
            Address 
        </div>
        <div class="col " align="center">
            Age
        </div>
        <div class="col " align="center">
            City
        </div>
        <div class="col " align="center">
            State
        </div>
    </div>

    <div class="row row-responsive item list card cardBase" ng-repeat="item in myList">
        <div class = "row row-responsive">
            <div class="col item-Overflow" align="center">
                {{item.LName}}
            </div>
            <div class="col item-Overflow" align="center">
                {{item.FName}}
            </div>
            <div class="col  item-Overflow" align="center">
                {{item.MName}}
            </div>
            <div class="col  item-Overflow" align="center">
                {{item.Address}}
            </div>
        </div>
        <div class = "row row-responsive">
            <div class="col item-Overflow" align="center">
                {{item.Age}}
            </div>
            <div class="col item-Overflow" align="center">
                {{item.City}}
            </div>
            <div class="col item-Overflow" align="center">
                {{item.State}}
            </div>
        </div>
    </div>
</div>

Where cardBase class is

.cardBase {
  margin: 15px 0;
  padding: 16px;
  width: 100%;
  height: 150px;
  resize: none;
}

After doing this still data is shown in one single row. Please help me to show data in following format

enter image description here

Upvotes: 0

Views: 551

Answers (1)

Prashant G
Prashant G

Reputation: 4900

As simple as this:

  <ion-content>

    <div class="card">

      <div class="row">
        <div class="col">John</div>
        <div class="col">Dev</div>
        <div class="col">Peter</div>
        <div class="col">Washington, DC</div>
      </div>

      <div class="row">
        <div class="col">23 Years</div>
        <div class="col">Tucson</div>
        <div class="col">USA</div>
      </div>

    </div>

  </ion-content>

Check ionic grids for more.

Upvotes: 1

Related Questions