Datepicker dropdown on modal [ position ]

[Dawid Namyslak]

Being displayed on modal , datepickd does not properly show ABOVE when there is no space below .

See the screen.

How to fix this ?

[Ponmani Murugaiyan]

Hi Dawid, 

 

Greetings from Syncfusion support. 

 

We would like to inform you that, our EJ2 DatePicker popup will be opened under the input component. If the place is not enough to show the popup, then it will be displayed at top of the input element. This is the default popup component behavior.  

 

While checking the reported issue we suspect that this issue may be caused due to any collision will be occurred when open the DatePicker popup. But unfortunately the reported issue is not reproduced at our end. 

 

So, we suggest you to either change the popup position or offset width in the open event of the DatePicker component as mentioned below. You can set the popup position X as ”left” and Y as “top” in the open event else you can set the offsetX and offsetY position with number value as per your requirement to position the DatePicker popup. 

 

onOpen(args) {  

    args.popup.position = { X: "left", Y: "top" }; // changing popup position  

  }  

onOpen(args) {  

    args.popup.offsetX=500; // changing the popup position with set any number value  

    args.popup.offsetY=500;  

}  

  

 

 

If issue still persist, please provide the below details that will be help for us to check and proceed further at our end.   

 

1. Have you rendered the DatePicker component inside Grid Dialog Template?
2. Have you done any CSS style changes for DatePicker component?
3. Are you facing this issue in the DatePicker component alone or else all the popup components such as DropDownList, AutoComplete, TimePicker component, etc.?
4. Share the issue reproducing sample or code example (if possible).

 

Regards,  

Ponmani M 

[Sharath Daniel]

Hi,

I'm getting this error "Cannot read properties of undefined (reading 'popup')" when using the above code. Could you please give me an example in stackblitz.

[Kokila Poovendran]

Hi Sharath Daniel,

Thank you for bringing up the error you encountered regarding "Cannot read properties of undefined (reading 'popup')." We understand the importance of resolving this issue promptly to ensure smooth functionality of the DatePicker component.

We have prepared a simple DatePicker component with an open event to set the popup position. However, upon testing, we were unable to replicate the issue at our end. Please find the attached sample below:

Sample: https://stackblitz.com/edit/angular-ameptv-nrhuur?file=src%2Fapp.component.html,src%2Fapp.component.ts

If you continue to experience the issue, we kindly request you to modify the shared sample to replicate the scenario you're encountering. Additionally, if possible, please provide a video illustration of the issue for better understanding.

Should you require further assistance or have any questions, please feel free to reach out to us. We're here to help.

[Sharath Daniel]

This works, thank you!