2

I have 3 rows in my layout(20% 60% 20%) and I want to insert images and some text in that layout and I have done. but I want to know what I have done is correct or not?

I should use flexbox or not in this case?

I tried this in ionic 3 but I don know whether it is correct or not please help me with this ionic html:

<ion-content padding>
  <ion-grid>
    <ion-row class="myrow">
      <ion-col class="first mycol">
        <!-- images in col -->
        <ion-row>
          <div class="firstrh">
          <ion-col col-4 col-md-6 col-lg-4>
              <img src="../../assets/imgs/3.jfif">
          </ion-col>
          <ion-col col-4 col-md-6 col-lg-4>
              <img src="../../assets/imgs/4.jfif">
          </ion-col>
          <ion-col col-4 col-md-6 col-lg-4>
              <img src="../../assets/imgs/5.jfif">
          </ion-col>
        </div>
        </ion-row>
      </ion-col> 
    </ion-row>
    <ion-row class="myrow">
      <ion-col col-4 class="second border  mycol">
        <!-- first col -->
        <ion-row>
          <ion-col col-12>
            <p>Something that has to be written here</p>
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col col-12>
            <p>Something that has to be written here</p>
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col col-12>
            <p>Something that has to be written here</p>
          </ion-col>
        </ion-row>
      </ion-col>
      <ion-col col-8 class="border  mycol">
        <!-- second col -->
        <ion-row>
          <div class="thirdrh">
          <ion-col col-6 col-md-6 col-lg-4>
            <img src="../../assets/imgs/1.jfif">
          </ion-col>
          <ion-col col-6 col-md-6 col-lg-4>
              <img src="../../assets/imgs/2.jfif">
          </ion-col>
        </div>
        </ion-row>
      </ion-col>
    </ion-row>

    <ion-row class="myrow">
      <ion-col class="third">

      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>


ionic css:
page-responsive {
    width:100vh;
    height:100vh;
    .scroll-content{
    padding:0!important;
    margin:0;
    }
    border:1px solid blue;
    .myrow{
        border:1px solid red;
        position: relative;
    }
    .mycol{
        border:1px solid green;
    }
    .firstrh{
        height:20vh!important;
        display: flex;
        flex-flow:row wrap;
        img{
            width:100%;
            height:18vh;
        }
    }
    .thirdrh{
        height:60vh!important;
        display: flex;
        overflow:hidden;
        img{
            width:100%;
            height:100%;
        }
    }
    ion-col.first{
        height:20vh;
        width:100%;
    }
    ion-col.second{
        height:60vh;
        width:100%;
    }
    ion-col.third{
        height:20vh;
        width:100%;
    }
    .border{
        border:1px solid gray;
    }

}

layout check

Joykal Infotech
  • 1,840
  • 3
  • 9
  • 17
Arshiya
  • 21
  • 4

1 Answers1

0

The Ionic 3 Documentation has a detailed explanation concerning the Grid layout feature: "The grid system is made of a 12 columns, and each ion-col can be sized by setting the col- attribute."

If you say that you have three rows (20%, 60%, 20%), do you probably mean columns? In the latter case, you cannot exactly achieve your required percentages because the 12 column layout of Ionic 3 provides no column separation where the center column is three times as wide as the left and right. Thus, you should either use your own layout styling (e. g. with FlexBox, as you mentioned) or accept the center column to be slightly thinner:

<ion-grid>
  <ion-row>
    <ion-col col-3>This column will take 3 columns (=25%)</ion-col>
    <ion-col col-6>This column will take 6 columns (=50%)</ion-col>
    <ion-col col-3>This column will take 3 columns (=25%)</ion-col>
  </ion-row>
</ion-grid>
SparkFountain
  • 2,110
  • 15
  • 35
  • yeah i am aware of 12 columns in one row.my question is i want 3 rows and first row should be of 20vh , second 60vh and third 20vh.in each row i want to display image that shoul be properly fix with in that row.how do i acieve that – Arshiya Aug 06 '19 at 06:02
  • Are you sure you want to use `vh` (= viewport **height**) as a measure for **rows**? Do you need the rows to be `20vh`/ `60vh` / `20vh` in width or height? – SparkFountain Aug 06 '19 at 07:31
  • My question was **which dimension** you want to style with `vh' - horizontal (width) or vertical (height)? – SparkFountain Aug 06 '19 at 08:27
  • its vertical height – Arshiya Aug 06 '19 at 09:23
  • In that case, you could introduce a CSS rule `ion-grid { display: flex; flex-direction: row; }` and attach some new classes to your rows, e. g. `` and `` with CSS rules `ion-row.short { height: 20vh; }` and `ion-row.long { height: 60vh; }`. – SparkFountain Aug 06 '19 at 09:31
  • in my case i have assigned vh to col, i.e, and css : ion-col.long{ height: 60vh; } ion-col.short{ height: 20vh; } what if i use this? – Arshiya Aug 06 '19 at 09:37