Datepicker not adjusting correctly in some case

[chiquan-hong]

When opening the datepicker on a small screen, the bottom border is not adjusted correctly.

Steps to reproduce:

1. open url https://aem-publisher-1.dev.axa-ch.intraxa/de/test-pods/esales/pod-esales-car.html#/start (open it on a small screen or zoom in till about 150%)
2. navigate till https://aem-publisher-1.dev.axa-ch.intraxa/de/test-pods/esales/pod-esales-car.html#/most-frequent-driver-birthdate
3. now open the datepicker and the months dropdown
4. when u open it the first time, u will see that its bottom border is not visible, which means it is not adjusting correctly. Therefore also the month "December" is not selectable.
5. close the month dropdown again and u will see the datepicker is adjusting its position and now displays correctly the bottom border. When u now open the months dropdown again, the "december" is now visible and selectable.

here an example:

opening datepicker and months dropdown the first time:

after closing the month dropdown and open it again:

we are using Datepicker Version 15.0.9.

thanks and best regards

Quan

[raphaellueckl]

Team discussion: We need to understand if this is an issue of the datepicker (in the PL it behaves as it should) or if the surrounding page/app-css is causing issues here.

[markus-walther]

@MartinStuedle failed to reproduce the bug just now - @chiquan-hong is this bug still reproduceable from your side? We also noted that the user journey involved a prior date picker instance, which worked ok, too (this would likely mean it is/was an app-level bug).

[chiquan-hong]

hi markus, yes this bug is still existing. best way to repproduce it, is to open it on your laptop screen, cause there the content is small enough, so u can see the datepicker is not adjusting correctly, only after opening the month dropdown the second time. Then its adjusting correctly. Yes you are right, there is a prior datepicker instance on an other screen, which works fine but this is because the screen content is little bit different (there is no subtitle, so datepicker has more space and the problem is not appearing there). So the problem only occurs, when the datepicker has not enough space, then initial adjustment is not working correctly. Please try to reproduce it again on your laptop screen (in that case, dont need to zoom in to 150%) and follow the instructions from the first thread, then it should be reproducable for you.

Thanks for your time and help.

best regards,

Quan

[Ben-Zahler]

@chiquan-hong the reason why this happens is the overflow:hidden property on .podesalesmf .mf_content_root I think this has to be fixed from your side, I see two options:

• remove the overflow:hidden css ruls, thats what I see on https://www.axa.ch/de/rechner/haushaltversicherung.html#/geburtstag
• ensure that your .podesalesmf element always has enough height so the dat picker does not overlap with the footer

[chiquan-hong]

@Ben-Zahler thanks for your analysis. i will have a look at it and will let you know, if we could solve it in this way. Thanks for your help.

[chiquan-hong]

@Ben-Zahler thanks for your advise, it worked fine :) i will close this issue.