Search code examples
htmlionic-frameworkionic2

HTML - Overlay Elements

I'm working with Ionic2 and I'm trying to display a list of rows: each row is divided into 2 parts, left and right, with his proper background color.

This is my code (inside a simple ion-row)

<ion-col col-6 [ngStyle]="{'background-color': leftColor}">Hi</ion-col>
<ion-col col-6 [ngStyle]="{'background-color': rightColor}"></ion-col>

And this is the result

enter image description here

I was wondering how could I realize these two steps:

1) how could I obtain a row with fixed height (in pixel or similar)

2) how could I overlay a text element in the position showed in the picture below (if the text was "longer" than the gray part, it will be continue on the violet one)

enter image description here

Solution

  • I'm not a big fan of Ionic grid system, I think it's too complicated to something that you can do easily with CSS grids. In your case you would need to override some CSS of the grid system and that could conflict with another CSS in your page, so I suggest using CSS grid instead of Ionic grid.

    HTML:

    <div class="component">
  <p>A REALLY LOOOOOOOOOOOO OOOOOOOOOOOOO OOOOOOOOONG TEXT</p>
  <div class="grid">
    <div class="bg-1" [ngStyle]="{'background-color': leftColor}"></div>
    <div class="bg-2" [ngStyle]="{'background-color': rightColor}"></div>
  </div>
</div>

    CSS

    .component {
  position: relative;

  p {
    position: absolute;
  }

  .grid {
    display: grid;
    grid-template: 90px / 1fr 1fr;
    // the first argument here is the height of the line, the second is how you divide your grid, in this case 2 columns that take both 1 fraction of the total width
  }
}