bug: datetime wheel picker can not show title

[pbowyer]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x
• Nightly

Current Behavior

I upgraded from Ionic Vue v5 to Ionic Vue 6.3.0 and the new ion-datetime widget has problems when used within an ion-item, with text being cut off.

To minimise the problems I switched from the calendar view to the wheel, and changed <ion-label position="floating"> to <ion-label position="stacked">

The bottom of the label text is cut off, as is the right side of the date wheel (less important). Here is a screenshot from Android:

Expected Behavior

It displays without issue

Steps to Reproduce

This is an extract from the component's template, which is included inside a View:

<template>
  <div
    class="ion-padding ion-margin-vertical error-message"
    :class="{ hide: !isFormError }"
  >
    Please fill in all the fields
  </div>
  <form>
    <ion-item lines="full">
      <ion-label position="stacked">DOB</ion-label>
      <ion-datetime
        presentation="date"
        prefer-wheel="true"
        v-model="local.dob"
        required="true"
      ></ion-datetime>
    </ion-item>
  </form>
</template>

Code Reproduction URL

https://github.com/pbowyer/ionic-bugreport

Ionic Info

Ionic:

Ionic CLI : 6.20.3 (/Users/****/.asdf/installs/nodejs/18.6.0/.npm/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/vue 6.3.0

Capacitor:

Capacitor CLI : 4.3.0
@capacitor/android : 4.3.0
@capacitor/core : 4.3.0
@capacitor/ios : 4.3.0

Utility:

cordova-res : not installed globally
native-run : 1.7.1

System:

NodeJS : v18.6.0 (/Users/****/.asdf/installs/nodejs/18.6.0/bin/node)
npm : 8.13.2
OS : macOS Monterey

Additional Information

No response

[liamdebeasi]

Thanks for the report. Your current usage is no longer recommended with the new datetime form factor because the label is built into the datetime component itself. Instead, you should use the title slot on ion-datetime:

<ion-datetime>
  <span slot="title">DOB</span>
</ion-datetime>

Can you give that a try and let me know if it resolves the issue?

[pbowyer]

Hi @liamdebeasi I've tried that and updated the bugreport Git repository to reflect, and the DOB title is not visible on-screen on Android when set using the slot.

[liamdebeasi]

Do you have a GitHub repo I can try? For reference, here is what the title is supposed to look like: https://codepen.io/liamdebeasi/pen/abGPNog

[pbowyer]

@liamdebeasi Yes see "Code Reproduction URL" in the bug report

[liamdebeasi]

Thanks! Looks like you found a bug. Here is a dev build that should fix the issue:

npm install @ionic/[email protected] @ionic/[email protected]

[liamdebeasi]

If you prefer the minimal/condensed layout of the old ion-datetime, you may want to consider using ion-datetime-button instead: https://ionicframework.com/docs/api/datetime-button#basic-usage This can be used in an ion-item as well.

---

Another pattern that I've seen (mainly on iOS) is to show/hide the datetime in an accordion: https://ionicframework.com/docs/api/accordion#basic-usage

Both of these approaches should let you keep your app's general look and layout.

[liamdebeasi]

Thanks for the issue. This has been resolved via #26101, and a fix will be available in an upcoming release of Ionic Framework.

When this fix ships, you will be able to use showDefaultTitle to show the title on the wheel picker. I also detailed two alternatives in #26095 (comment) if you would prefer to continue using the ion-label approach for now. Let me know if you have any additional questions.

[pbowyer]

Thanks @liamdebeasi, I haven't been back onto the project yet to try the dev build yet. Hoping to later this week 🥳

[pbowyer]

Hey @liamdebeasi, I tried this one today:

If you prefer the minimal/condensed layout of the old ion-datetime, you may want to consider using ion-datetime-button instead: https://ionicframework.com/docs/api/datetime-button#basic-usage This can be used in an ion-item as well.

Looks perfect on iOS inside an ion-item (save for a missing bottom margin on ion-datetime-button which puts it against the bottom line) but on Android this is how it looks:

Everything was per the example in the docs except the markup, where I used

    <ion-item lines="full">
      <ion-label position="stacked">DOB</ion-label>
      <ion-datetime-button datetime="datetime"></ion-datetime-button>
      <ion-modal :keep-contents-mounted="true">
        <ion-datetime presentation="date" id="datetime"></ion-datetime>
      </ion-modal>
    </ion-item>

EDIT: the cause of the Android problem was adding margin-bottom to fix the no-space issue on iOS:

ion-datetime-button {
  margin-bottom: 0.5rem;
}

Without it the Android display doesn't overlap the ion-label - but has no space above or below the button.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.