I'm trying to achieve a list similar to the one shown here: http://arunsfolio.com/wp-content/uploads/2015/04/list-petro.png
I'm not sure if I am missing something in sass.
This is the code:
<ion-row>
<ion-col width-40>
<h4>Esso</h4>
<p>Ungrester - 54</p>
<p>84859 - munch</p>
</ion-col>
<ion-col width-40>
<div class="priceStyle">
<div class="priceChild">
$123
</div>
</div>
</ion-col>
<ion-col width-10>
<div>
12KM
</div>
</ion-col>
</ion-row>
SCSS:
.priceStyle {
background-color: lightblue;
display: flex;
flex-direction: column;
width: 100px;
height: 50px;
border-radius: 2px;
}
.priceChild {
font-weight: bold;
font-size: 1.5em;
color: white;
margin: 0;
flex: 1;
justify-content: flex-end;
align-items: flex-end;
}
My code isn't aligning the elements in the centre.
This is how it is displayed right now:
Appreciate your help.
Thanks.
The new recommended way is to apply this using class="ion-text-center" . This is because you can't add these directives like text-center in React or Vue so they standardised on using classes for everyone. Save this answer. Show activity on this post.
Rows are created a horizontal structure with various numbers of columns, a maximum of 12 columns can be fitted in the row to occupy the full width. Columns: To define a column or a cell use the ion-col tag, Columns are declared in the row to acquire the full available space inside the row.
You have to use ion-justify-content-center on a flexbox node. So either you put display: flex on your wrapper div node, or you just use ion-justify-content-center on <ion-row> like so. Save this answer.
shadow. Columns are cellular components of the grid system and go inside of a row. They will expand to fill the row. All content within a grid should go inside of a column.
You can use the properties:
display: flex;
justify-content: center;
on the
<ion-row>
element.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With