Html Alignement issue, need help

Ionic Framework
1

Hi All

As you see from the screen shot, the “Start Date:” and actual selected date is not aligned perfectly. My code is below. What i am i doing wrong?

date
date482×585 15.1 KB 

        
        <ion-item-divider class="divider_custom">
          <ion-grid fixed="true">
            <ion-row class = "justify-content-start">
              <ion-col size="auto" class="align-self-center">
                <ion-label class="test">Start Date:</ion-label>
              </ion-col>
              <ion-col size="auto" class="align-self-center">
                <ion-datetime name="a" displayFormat="MMMM/DD/YYYY" min="2019-01-01" max="2022-12-31"
                  [(ngModel)]="StartDate" value="StartDate"></ion-datetime>
              </ion-col>
            </ion-row>
          </ion-grid>
        </ion-item-divider>

        <ion-item-divider class="divider_custom">
          <ion-grid fixed="true">
            <ion-row class = "justify-content-start">
              <ion-col size="auto" class="align-self-center">
                <ion-label>End Date:</ion-label>
              </ion-col>
              <ion-col size="auto" class="align-self-end">
                <ion-datetime name="b" displayFormat="MMMM/DD/YYYY" min="2019-01-01" max="2022-12-31"
                  [(ngModel)]="EndDate" value="EndDate"></ion-datetime>
              </ion-col>
            </ion-row>
          </ion-grid>
        </ion-item-divider>
2

Hi! :wave:

I think you can do it using css properties like verical-align. I put some links that can help you:

https://www.w3schools.com/howto/howto_css_center-vertical.asp

5

Add this css in your page.scss file

.divider_custom{
  ion-datetime{
    --padding-top:0px;
  }
}

i hope its worked for you

6

Saad

This seems to be work.

I have many other elements, would this need to be done for each one or is the a global way of doing this?