How to limit datetime "clickable area"

Ionic Framework ionic-v3
1

Hey,
I have the following structure:

    <ion-item *ngFor="let x of myList;">
      <button ion-button outline item-start (tap)="foo(x);">
        <ion-icon name="settings"></ion-icon>
      </button>
      <ion-label color="primary">
        {{ x.id }}
      </ion-label>
      <ion-datetime item-end displayFormat="mm:ss" [(ngModel)]="x.date"></ion-datetime>
    </ion-item>

My problem is that ion-datetime clickable area spread all over the item and it is impossible to click on the setting button.
How can I fix it?

Thanks.

1 Like
2

I didn’t understand what are you doing or what want you doing ? If you can add a screenshot or you can express detail, i will try to help you.

3

image

When pressing on the setting button the date picker is fired instead of foo(x).

Thanks

4

In ionic, ion-datetime in ion-item cover to all item. I think date time didn’t exist any properties for this. You must edit css or js for this. Just like this:

ion-datetime button{width: auto !important;}
5

Perhaps a variant of this might help…

The ability to trigger the datepicker using a (click) event. If you were to display the date using some other means and have a button using the method mentioned in the link you might get away with it.

6

I have already tried this trick but I got stuck.

<ion-datetime #datePicker item-end (ionChange)="x.dateChanged($event)" displayFormat="mm:ss" [(ngModel)]="x.date"></ion-datetime>

When I used a reference (under the *ngFor) all items’ date pickers where bonded to the first item and changed its value. :cry:

7

I will try it :slight_smile:
Thanks.

EDIT:
Cool!
Can you please explain why this solved it?

8

ion-datetime in ion-item will create a button cover the hole ion-item and z-index value set higher than any item in ion-item. You click to ion-item, actually you click to button in ion-datetime and it opens to ion-datetime. If you set witdh to auto, button will not cover all ion-item and you can click any item in ion-item.

Solution 2: You can set ion-datetime position:relative and button covers to just ion-datetime. I think this is a better solution for you:

ion-item ion-datetime{position:relative !important;}
2 Likes
9

Perfect.
Thank you my friend.

1 Like
10

Thank you It worked.

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

i added width:100% also.

Final :

ion-item ion-datetime{
position:relative !important;
width:100%;
}

1 Like