Date Picker positioning – Windows/Edge and Android/Chrome error

Hi @hollosipeter

I hope you’re well today!

Try adding this CSS to the site:

.ui-datepicker {
   position:absolute!important;
   margin-top:20px!important;
}

Note that this uses slightly different selector than yours and it also uses – not particularly “elegant” but useful if there’s no other option – “!important” declaration.

Make sure that this code isn’t added directly in form custom CSS but rather in some custom CSS of the theme and if there is any other custom CSS already there, add it at the very end rather than at the start. Also, make sure to clear all cache on site/server after adding it.

Kind regards,
Adam

Hello Adam!
I tried it. Yes, unfortunately, it is not to beautiful – and this is solve the problem in Edge, but from Firefox totally disappear.
Can you maybe somehow fix this in the plugin or some other solution? Because every platform is working the factory settings, only Android/Chrome and Windows/Edge not?

Thank you,
Peter

(And this issue is not came up when I’m insert Forminator form to a single page – just with a popup).
And I don’t want that any other plugin’s date picker modifying just because error of 2 kind of browsers.
Thank you!

Hi @hollosipeter,

(And this issue is not came up when I’m insert Forminator form to a single page – just with a popup).

I tested in my system to see whether I could replicate such a behaviour by adding the form inside the popup but the Date Picker field loads fine without any issue.

Could you please export both the popup and the form, so that we could test the same in our side and see how it behaves too?

Please check the following doc on how to export the form & popup:
https://wpmudev.com/docs/wpmu-dev-plugins/forminator/#import-export

https://wpmudev.com/docs/wpmu-dev-plugins/hustle/#module-dashboards

If you are concerned about any sensitive information in the form, then you can duplicate your form, remove any sensitive information, and then export it.

You can share the export file via Google Drive, Dropbox or any cloud services in the next reply.

Looking forward to your response.

Kind Regards,
Nithin

Hello!

This is public directly on the front page: https://www.bachatasensual.hu/ – first link – CLICK HERE TO REGISTER.
You will see just check please form Microsoft Edge/Windows 10
The forminator form is already exported yesterday for another topic here:
https://pastebin.com/t1j0xFnj
On the popup I didn’t add nothing plus info.

Thanks,
Peter

Hi @hollosipeter

I’m sorry that the issue is still affecting your site.

I understand why you expect us to “fix it in the plugin” but the problem is that we cannot replicate this. My colleague tried earlier and I just tried again with a form created from scratch and then with the form that you shared – in all browsers, including Edge.

In all cases this worked fine with the datepicker showing up and showing in correct position. Which clearly suggests that the issue is in some way site-specific.

If the CSS fix that I shared earlier is not good for you, then we can of course give it another shot and investigate it closer but in this case I’d like to ask you to also share (in addition to the form that you shared):

1. The export of the popup in which form is added (you can also share it the same way as form)

2. and all custom CSS (if there is) that is added to the site to affect the popup in question and the form itself (those can also be shared via pastebin).

We could then put it all together on the test site and test further.

Kind regards,
Adam

Hello Adam!
This is my popup export:
https://pastebin.com/AGvqzJ7k
About CSS:

Custom CSS:
I only have this (but this was earlier when I added hustle plugins:
.woocommerce-checkout .col2-set.notices-forms .col-2, .woocommerce-checkout .col2-set.notices-forms .col-1 {
float: none !important;
width: 100% !important;
}

yith-par-message-cart {
display:block!important;
}

Additional CSS:
You gave me a month ago because I wanted to click Privacy Policy from dance course registraton and z-index was not shown the new popup. But if I delete this, from Edge is the same problem – so my customer who contacted me about “date picker not shown”. (BTW: you said that is website specific – if you try click on my website main page from Win10/Edge, the same issue?
The bachatasensual.hu/registration – normal PHP page with forminator shortcut is working well as Edge too. Just popup involed this.

So additional:

yith_birthday_field .optional {

display: none;
}

.hustle-ui.module_id_3 .hustle-layout .hustle-layout-form {

display: none!important;

}

.hustle-ui.module_id_5 .hustle-layout .hustle-layout-form {

display: none!important;

}

.hustle-ui.module_id_6 .hustle-layout .hustle-layout-form {

display: none!important;

}

.hustle_module_id_5,
.hustle_module_id_5 * {
z-index: 999999!important;
}

Thank you in advance!

Peter

Hi @hollosipeter,

I hope you are doing well today!

I tested your pop-up within the imported Forminator form and it works well without adding any additional CSS on all browsers, please check on your side by cutting out all related custom CSS and add them again one by one until you can find out the part which causes the issue.

Kind regards,
Zafer

Hello! I tested before I wrote but not working without any css.

it is from customers, who said me this, so from more computers, more browsers from edge jot working. Not just for me. Somebody contacted me and after I tried.

thanks

peter

Hi @hollosipeter

I hope you are doing well.

I made a couple of tests and was able to replicate this problem, unfortunately, the only fix would be the one Adam shared using the absolute position.

It happens because we use JS to calculate the position of the calendar box but when it is on PopUp the position is not being calculated correctly.

Once that is said, we are going to report to our developer, another option is to switch the Date field to the dropdown.

Best Regards
Patrick Freitas

Hello Patrick!
Now I upload again Adam’s additional CSS and it seems like working in Edge, but from iOS – Safari and Chrome and Win/Firefox, so every other browser is wrong, to date picker disappear, or it is too bottom.

Can you tell me please how can I use Adam’s code with an exception, that that code not load on any browser, just Edge? Something like:
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.ui-datepicker {
position: absolute !important;
margin-top: 20px !important;
}
}

But this is not working ??

Till you developers maybe can do something it is a good workaround

Thank you,
Peter

Hello Peter,

Yoou can target Edge with CSS using the user-agent selector, by putting html[data-useragent*='Edg'] before the current code, for example:

html[data-useragent*='Edg'] .ui-datepicker {
   position:absolute!important;
   margin-top:20px!important;
}

Could you please test it, and let us know if there’s still any issue.

Best Regards,
Dmytro

• This reply was modified 1 year, 7 months ago by Dmytro - WPMU DEV Support.

Hello Dmytro!

I put this to the additional css section (to the last line), but nothing happening, so everything is working from everywhere except Edge, where the code is not applying.

Thank you,
Peter

Hello Peter,

My apologies, it will also require a custom script for creating the user agent attribute.

You can do this with a must use plugin, for example. In addition to CSS code you’ve added, please create a new text file with the following content:

<?php

	add_action(

		'wp_footer',

		function() {
			?>

			<script>
				document.documentElement.setAttribute('data-useragent',  navigator.userAgent);
			</script>

				<?php
		},

		999

	);

Save it and rename to a PHP file, e.g.: ‘edge-datepicker-fix.php’, then upload to /wp-conent/mu-plugins/ directory on the site.

Make sure to flush the site caches, and refresh the page to check if it worked.

Best Regards,
Dmytro

Hello Dmytro!

Thank you. With the code is working from Windows 10/Windows 11 – Edge but with this – and now after this (some times working, sometimes not):

not working from:
– Windows 11 – Firefox (from Windows 10 it is okay, weird)
– Windows 10 / Windows 11 – Chrome – totally not working

iPhone/iOS is always working (ios chrome and ios safari too) I don’t have android to test

I’m switching not the drop-down menu, because I’m advertising my dance courses with 500 USD/month (adword and meta d) and it is weird: after I put the form registration to the popup, not so much people registered, so I’m switching now and I hope you can find a workaround later – one weird thing in dropdown: I can choose in every year separately YYYY MM DD so I tried and let me choose 1983 | 02 | 31 – so february 31. But after submission they are setting to march 3 – so updating the plus 3 days.
But the problem is, I want the real date from the users. So maybe this is another known issue.

Thanks,
Peter