Align button with text

Ionic Framework ionic-v3
1

I’m trying to align a button with review information but failing to do so for the moment.

image

This is my HTML code. There is an ion-list wrapping the ion-grid so ion-item contains an ng

    <ion-list> 
        <ion-grid no-padding>
            <ion-item text-wrap *ngFor="let item of [1, 2, 3]">
                <ion-row>
                    <ion-col width-40>
                        <img [src]="imageSrc">
                    </ion-col>

                    <ion-col width-60>
                        <h2 class="topName">{{name}}</h2>

                        <ion-col class="bottomReviews" width-50>
                            <p> 10 Reviews</p>
                        </ion-col>

                        <ion-col class="bottomReviews" width-50>
                            <button class="bottomShare" clear small>
                                <ion-icon name='share-alt'></ion-icon>
                                <label text-capitalize>Share</label>
                            </button>
                        </ion-col>

                    </ion-col>
                </ion-row>
            </ion-item>
        </ion-grid>
    </ion-list>

And this is my CSS

    .bottomReviews {
        position: absolute;  //This is positioned relative to the nearest positioned ancestor
        bottom: 15px;
    }
    
    .topName {
        position: absolute;  //This is positioned relative to the nearest positioned ancestor
        top: 15px;
        font-size: 110%;
    }
    
    //To take out the padding in ion-label stored within ion-item
    ion-grid > ion-item.item > div.item-inner > div.input-wrapper > ion-label {
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        margin-left: 0px;
    }
    
    //To take out the padding in ion-col
    ion-label > ion-row > ion-col {
        padding-top: 5px;
        padding-right: 5px;
        padding-bottom: 0px;
        padding-left: 5px;
    }

Edit: I was able to align everything by using ion-row, ion-col and taking out all the position: absolute;

2

Same question with this one:

image

How would you align the edit button with the title?

Here’s the html code

<h2>
    {{name}} 
    <button clear>
        <ion-icon name='share-alt'></ion-icon>
        <label text-capitalize>Edit</label>
    </button>
</h2>
3

Vertical align resolve this issue?
http://www.w3schools.com/cssref/pr_pos_vertical-align.asp

4

Thanks for the suggestion.

It didn’t work :pensive:

5

Check out the following article: An In Depth Look at the Grid System in Ionic 2. It contains some examples of how to use the Ionic grid system. Maybe it will help you.

6

Thanks for the link but I’ve already read it. I’ve applied it to align the two bottom buttons (review and share) but I don’t know how to align Edit button with the text.

7

I guess that you’ll have to resort to manually crafted CSS in this case.