CODEWITHSUNDEEP
cssionic-frameworkionic3
lqrz
lqrz

Reputation: 105

Ionic: Fit ion-grid with to content

I've been struggling with this lately, and thus I've finally decided to post it here asking for help.

The figure below shows what I'm getting now. I have an ion-card (in red), and inside, an ion-grid (blue) which has 6 ion-rows, the last two containing 3 ion-cols (in green).

No width was specified to any of the attributes (except for the ion-cols, which have a col-4 attribute), the last two rows are taking up the whole width of the ion-grid... I would like to achieve 2 things:

For the last two rows to fit their content (that is, all cols having the width of the cell with the longest content); and then, to get that grid, which will now be one width shorter than the width of the ion-card, and center it horizontally on the card. Can anyone guide me? Thanks!

Screenshot Image

Here is the resulting html code:

<ion-card class="card card-md">

  <ion-card-content class="card-content card-content-md">
    <ion-grid class="grid">

        <ion-row class="row">orci ut</ion-row>

        <ion-row class="row">lorem ipsum dolor</ion-row>

        <ion-row class="row">consectetur adipiscing </ion-row>

        <ion-row class="row">tristique</ion-row>

        <ion-row class="row">
      <ion-col class="col" col-4="">netus</ion-col>
      <ion-col class="col" col-4="">dui sollicitudin lacinia </ion-col>
      <ion-col class="col" col-4="">accumsan</ion-col>
    </ion-row>
    <ion-row class="row">
      <ion-col class="col" col-4="">Phasellus porta</ion-col>
      <ion-col class="col" col-4="">bibendum</ion-col>
      <ion-col class="col" col-4="">tempor eget</ion-col>
    </ion-row>

    </ion-grid>
  </ion-card-content>
</ion-card>

Upvotes: 1

Views: 2534

Answers (1)

Phonolog
Phonolog

Reputation: 6511

I hope I'm getting this right: First of all, if your columns should fit their content, just omit the col-4. See the docs on this:

By default, columns will take up equal width inside of a row for all devices and screen sizes.

To center the columns horizontally you can then use the text-align CSS property. See the description on developer.mozilla.org:

The text-align CSS property specifies the horizontal alignment of an inline or table-cell box.This means it works like vertical-align but in the horizontal direction.

The result might look something like this (I'm using inline styles, you might want to add those styles to your CSS if it works for you):

<ion-card class="card card-md">
    <ion-card-content class="card-content card-content-md">
        <ion-grid class="grid">

            <ion-row class="row">orci ut</ion-row>
            <ion-row class="row">lorem ipsum dolor</ion-row>
            <ion-row class="row">consectetur adipiscing </ion-row>
            <ion-row class="row">tristique</ion-row>

            <ion-row class="row" style="text-align: center">
                <ion-col class="col">netus</ion-col>
                <ion-col class="col">dui sollicitudin lacinia </ion-col>
                <ion-col class="col">accumsan</ion-col>
            </ion-row>
            <ion-row class="row" style="text-align: center">
                <ion-col class="col">Phasellus porta</ion-col>
                <ion-col class="col">bibendum</ion-col>
                <ion-col class="col">tempor eget</ion-col>
            </ion-row>

        </ion-grid>
    </ion-card-content>
</ion-card>

Upvotes: 1

Related Questions