Trying to make ion-datetime’s style the same as the ion-input style

Question

I want to make the ion-datetime to have the same style as the input style to make my design consistent.

To be clear, please have a look at the image below.

I've tried to modify the CSS properties the same way I created the input style but I can't get the text to be vertically centered. Applying vertical-align: middle or display: flex with align-items: center doesn't work. Is there any way to achieve this behavior?

Here is my current CSS for both the input and the datetime:

ion-input,
ion-datetime {
  background-color: #131313;
  border-radius: 10px;
  padding: 0 1.25rem !important;
  margin-top: 0.25rem;
  font-size: 1rem;
}

And here is my template if needed:

<IonRow>
  <IonCol>
    <IonItem lines="none" class="ion-no-padding">
      <IonLabel position="stacked">Birth Place</IonLabel>
      <IonInput v-model="data.birthplace" />
    </IonItem>
  </IonCol>
  <IonCol>
    <IonItem lines="none" class="ion-no-padding">
      <IonLabel position="stacked">Birth Date</IonLabel>
      <IonDatetime id="datetime-input" v-model="data.birthdate" />
    </IonItem>
  </IonCol>
</IonRow>

Thanks in advance!

score 1 · Answer 1 · answered Nov 01 '20 at 00:09

Just found the answer, after reading the docs carefully and analyzing the structure of the DOM from the devtools, I realize that the text was encapsulated inside the shadow-dom.

In order to make it work, I must first expose the part using ::part, so instead of doing it like this which is doesn't work:

ion-datetime {
  ...
  display: flex;
  align-items: center;
}

I changed it to this:

ion-datetime {
  ...
}

ion-datetime::part(text) {
  display: flex;
  align-items: center;
}

It works just like what I wanted now.

Trying to make ion-datetime’s style the same as the ion-input style

1 Answers1