Design and padding help

Ionic Framework
1

Hi, I am having trouble getting the correct CSS for my app.
I Currently have 2 cards at the top of an image. The purpose of my app is to use the native screenshot plugin to take a screenshot of the two cards just above the image. As close as possible to this designed in Android (I am trying to move from Android to Ionic):

null
null1080×2254 117 KB

Here is what I have currently produced in Ionic:

Screenshot_20200715-190748_MyApp
Screenshot_20200715-190748_MyApp1080×2340 938 KB

I would like to align the 2 cards at the top of the screen with no padding then the image right below so. Here is my HTML code:

<ion-content>

  <ion-grid>

    <ion-row>

      <ion-col>

        <ion-card>

          <ion-card-header>

            <ion-card-title>{{this.RetDataType}}</ion-card-title>

            <ion-card-subtitle>{{this.RetRefNum}}</ion-card-subtitle>

          </ion-card-header>

          <ion-card-content>

          </ion-card-content>

        </ion-card>

      </ion-col>

      <ion-col>

        <ion-card>

          <ion-card-header>

            <ion-card-title>Image Number</ion-card-title>

            <ion-card-subtitle>{{this.RetImageNum}}</ion-card-subtitle>

          </ion-card-header>

          <ion-card-content>

          </ion-card-content>

        </ion-card>

      </ion-col>

    </ion-row>

  </ion-grid>

  

  <ion-img [src]="RetTakenImage"></ion-img>

  <ion-button (click)="TakeScreenshot()">Screenshot</ion-button>

</ion-content>

I have no CSS added yet as i had tried removing padding etc but cant get them how i want them. Any help would be greatly appreciated!

Thanks

2

Aesthetically speaking, I’m not the biggest fan of the way the internal borders are fatter than the external borders in the textual cells, so I would do this instead:

<ion-content>
  <div class="outer">
    <div class="toplogo">
      <img src="logo">
    </div>
    <div class="top field-label">Sample Request Number</div>
    <div class="top field-value">1234</div>
    <div class="bottom field-label">Image No.</div>
    <div class="bottom field-value">1</div>
    <div class="photo">
      <img src="photo">
    </div>
  </div>
</ion-content>


.outer {
  display: grid;
  grid-template-columns: 1fr 1fr;

  .toplogo, .photo {
    grid-column: 1 / span 2;
    text-align: center;
  }

  .field-label, .field-value {
    border: 2px solid black;
  }

  .top {
    border-top: 4px solid black;
  }

  .bottom {
    border-bottom: 4px solid black;
  }
}

However, as your question asks for bug-compatibility,

.outer {
  display: grid;
  grid-template-columns: 1fr 1fr;

  .toplogo, .photo {
    grid-column: 1 / span 2;
    text-align: center;
  }

  .field-label, .field-value {
    border: 4px solid black;
  }
  //
  //.top {
  //  border-top: 4px solid black;
  //}
  //
  //.bottom {
  //  border-bottom: 4px solid black;
  //}
}
1 Like
3

Thanks a lot!! Really appreciate the help and quick response