Help me make ion-datetime's style the same as the Input style

Ionic Framework Ionic Vue
1

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.

image

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 necessary:

<IonItem lines="none" class="ion-no-padding">
  <IonLabel position="stacked">Birth Place</IonLabel>
  <IonInput v-model="data.birthplace" />
</IonItem>

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

used ionGrid and removed IonItem since it wasn’t adding any value

<IonGrid>
  <IonRow>
    <IonCol>
      <div>
        <IonLabel position="stacked">Birth Place</IonLabel>
        <IonInput v-model="data.birthplace" />
      </div>
    </IonCol>
    <IonCol>
      <div>
        <IonLabel position="stacked">Birth Date</IonLabel>
        <IonDatetime id="datetime-input" v-model="data.birthdate" />
      </div>
    </IonCol>
  </IonRow>
</IonGrid>

Screen Shot 2020-10-31 at 8.21.29 PM
Screen Shot 2020-10-31 at 8.21.29 PM1160×230 11.3 KB

See Project In CodeSandbox: https://codesandbox.io/s/vue-3-ts-forked-hkr4p

1 Like
3

Hi @aaronksaunders ! thanks for answering, that is exactly what I did for the HTML part, but it is not the problem, what I want is to make the text inside the IonDatetime vertically centered.

4

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.

visual explanation

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.

5

not understanding what you are looking for… I don’t think you need to that deep in the shadow dom, you are making this more complicated than it needs to be?
take a look at the screen shot for my solution

1 Like
6

Well… that’s kinda odd… it doesn’t work on me :neutral_face:

image

<IonGrid>
  <IonRow>
    <IonCol>
      <div>
        <IonLabel position="stacked">Birth Place</IonLabel>
        <IonInput v-model="data.birthplace" />
      </div>
    </IonCol>
    <IonCol>
      <div>
        <IonLabel position="stacked">Birth Date</IonLabel>
        <IonDatetime id="datetime-input" v-model="data.birthdate" />
      </div>
    </IonCol>
  </IonRow>
</IonGrid>
7

Make sure you have imported ALL of the ionic component and added them to the components section of the file

8

I did import them all… I think I messed up the global styles, I’ll have a look for it.

import {
  IonPage,
  IonHeader,
  IonToolbar,
  IonTitle,
  IonContent,
  IonLabel,
  IonCard,
  IonCardContent,
  IonIcon,
  IonRippleEffect,
  IonDatetime,
  IonGrid,
  IonRow,
  IonCol,
} from '@ionic/vue'

export default defineComponent({
  name: 'PersonalUpdatePage',
  components: {
    IonPage,
    IonHeader,
    IonToolbar,
    IonTitle,
    IonContent,
    IonLabel,
    IonCard,
    IonCardContent,
    IonIcon,
    IonRippleEffect,
    IonGrid,
    IonRow,
    IonCol,
    IonDatetime,
  },
  setup() {
    ...
  }
}