Ionic-framework: ion-datetime must be in <ion-item> or full visible screen is click target

[kevineaton]

Note: If you are having problems formatting your issue please refer to this article on using markdown in Github:

https://guides.github.com/features/mastering-markdown/

Note: for support questions, please use one of these channels:

https://forum.ionicframework.com/
http://ionicworldwide.herokuapp.com/

Short description of the problem:

When using the component in a Card, the entire visible screen is a clickable target that will open the selector. This prevents multiple datetime components or other components from being able to be clicked. Elements rendered outside of the initial screen render are not overlayed.

What behavior are you expecting?

components should only be clickable in their immediate container, be it a card or a grid column.

Steps to reproduce:

1. Use the first set of code below to see that the entire screen is clickable. This occurs on the browser and iOS; not tested on Android.
2. Use the second set of code below to see the workaround fix.

Set 1:

<ion-card>
    <ion-card-header>
      Date Range
    </ion-card-header>
    <ion-card-content>
      <ion-grid>
        <ion-row>
          <ion-col width-25>
            <ion-label>Dates:</ion-label>
          </ion-col>
          <ion-col>
            <ion-datetime displayFormat="MM/DD/YY to" pickerFormat="YYYY MMM DD" [(ngModel)]="startDate"> </ion-datetime>
          </ion-col>
          <ion-col width-33>
            <ion-datetime displayFormat="MM/DD/YY" pickerFormat="YYYY MMM DD" [(ngModel)]="endDate"> </ion-datetime>
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-card-content>
  </ion-card>

Code set 2:

  <ion-card>
    <ion-card-header>
      Date Range
    </ion-card-header>
    <ion-card-content>
      <ion-grid>
        <ion-row>
          <ion-col width-25>
            <ion-label>Dates:</ion-label>
          </ion-col>
          <ion-col>
            <ion-item>
              <ion-datetime displayFormat="MM/DD/YY to" pickerFormat="YYYY MMM DD" [(ngModel)]="startDate"> </ion-datetime>
            </ion-item>
          </ion-col>
          <ion-col width-33>
            <ion-item>
              <ion-datetime displayFormat="MM/DD/YY" pickerFormat="YYYY MMM DD" [(ngModel)]="endDate"> </ion-datetime>
            </ion-item>
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-card-content>
  </ion-card>

Which Ionic Version? 2.0.0-beta.32

Plunker that shows an example of your issue

For Ionic 1 issues - http://plnkr.co/edit/Xo1QyAUx35ny1Xf9ODHx?p=preview

For Ionic 2 issues - http://plnkr.co/edit/me3Uk0GKWVRhZWU0usad?p=preview

Run ionic info from terminal/cmd prompt: (paste output below)

$ ionic info

Your system information:

Cordova CLI: 6.2.0
Gulp version: CLI version 3.9.0
Gulp local: Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.10
Ionic CLI Version: 2.0.0-beta.32
Ionic App Lib Version: 2.0.0-beta.18
ios-deploy version: 1.8.6
ios-sim version: 5.0.4
OS: Mac OS X El Capitan
Node Version: v5.11.1
Xcode version: Xcode 7.3.1 Build version 7D1014

[brandyscarney]

So this is because .item has position: relative on it and when ion-datetime is not placed inside of an item the closest relatively positioned element to it is the content which causes the clickable area to cover the entire screen. I believe the solution is to make ion-datetime itself relatively positioned:

ion-datetime {
  position: relative;
}

I'll have to confirm this doesn't have any negative side effects though.

[brandyscarney]

Looking at this more the above will break the ability to click labels inside of an item, so I think the correct solution is to add the above css for datetime components not in an item and then add the following to cover when it is inside of an item:

.item-datetime ion-datetime {
  position: initial;
}

[SadamChami]

When i am putting datetime in to grid , There will be full screen tappable area.
`

<div *ngFor="let item of dealTimes; let i = index">
  <ion-label>Time Slot {{i}}</ion-label>
  <ion-row >
    <ion-col width-50>
      <ion-label>Start Time</ion-label>
      <ion-datetime displayFormat="HH:mm" [(ngModel)]="item.startTime"></ion-datetime>
    </ion-col>
    <ion-col width-50>
      <ion-label>End Time</ion-label>
      <ion-datetime displayFormat="HH:mm" [(ngModel)]="item.endTime"></ion-datetime>
    </ion-col>
  </ion-row>
</div>

`
I am running on 2.0.0 (latest)

[jgw96]

Hello all, it is currently recommended that ion-datetime always be put in an ion-item. It would currently be a relatively large change that could have bad side-effects to make this change. Because of this I am going to be closing this issue for now as a wont fix. Thanks

[mayur-novus]

I had the markup as:

<ion-item>
  <ion-label>Sunday</ion-label>
  <ion-datetime displayFormat="hh:mm A" placeholder="10:00 AM"
                [(ngModel)]="shop.sunday.opening"></ion-datetime>
  <ion-datetime displayFormat="hh:mm A" placeholder="07:00 PM"
                [(ngModel)]="shop.sunday.closing"></ion-datetime>
</ion-item>

Also had the same issue where the second ion-datetime would get triggered.

This is what I did:
css:

ion-datetime {
  button {
    position: relative !important;
  }

  .datetime-text {
    overflow: visible;
  }

  flex: 1;
}

Hope this helps someone else too.

[RobYed]

@mayur-novus your CSS was a drop-in solution for me. Thanks a lot!

[ionitron-bot[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.