Different positioning of the calendar window on Windows

[pehbeh]

If I am in a ticket and want to change the due date, the calendar is not always positioned correctly.

On macOS (Safari, Edge), the calendar is always located below the input field. On Windows with Edge, we have found that the calendar is positioned differently depending on where you are on the page. Sometimes it covers the dialog window or is aligned upwards.

Would it be possible for the calendar to always be in the same position here? This confuses our employees in some places and also leads to problems and display errors on very large monitors.

Correct, when I scroll up and i am at the top of the page and open the dialog:

Oddly position when i scroll the site and open the dialog:

[JediKev]

@pehbeh

You are using the "German version" which we do not support. It's not an official build of osTicket as whomever maintains the "German version" makes their own modifications to it.

You'll need to install an official build of osTicket from our website and retest. If you can replicate the issue with an official build of osTicket then please re-open this issue. If you cannot replicate the issue with an official build of osTicket then you will need to reach out to the maintainers of the "German version" for further assistance.

Cheers.

[pehbeh]

Hi @JediKev

I wasn't able to test it with my own installation quickly, but the error also occurs in a current instance of the cloud-hosting version of osticket.com.

[JediKev]

@pehbeh

So how exactly do I replicate the issue? Your OP is kind of confusing. Scroll any bit, or a specific amount, or?

Cheers.

[pehbeh]

Hi @JediKev

Sorry. :) I tried to present it like this:

https://user-images.githubusercontent.com/1836347/228949567-c231f4e6-cdcc-4799-a2d9-c1cf8ea7d1ed.mp4

[JediKev]

@pehbeh

Interesting, I'm using a windows vm to test and I cannot replicate this. I don't have Edge though; only Firefox and Chrome. Are you able to test this with a different browser like Chrome/Firefox?

Cheers.

[pehbeh]

Hi @JediKev

No problem. :) I'm also interested in making sure this runs correctly.

I just downloaded the latest versions of Firefox and Chrome and can confirm the behavior in both browsers. I usually use the current version of Windows 10 Pro natively.

[JediKev]

@pehbeh

Try this diff and see:

diff --git a/include/class.forms.php b/include/class.forms.php
index 19f825c2d..b92d361d3 100644
--- a/include/class.forms.php
+++ b/include/class.forms.php
@@ -5005,7 +5005,7 @@ class DatetimePickerWidget extends Widget {
         }
         ?>
         <input type="text" name="<?php echo $this->name; ?>"
-            id="<?php echo $this->id; ?>" style="display:inline-block;width:auto"
+            id="<?php echo $this->id; ?>" style="display:inline-block;width:auto;position:sticky;"
             value="<?php echo $this->value; ?>"
             size="<?php $config['time'] ? 20 : 12; ?>"
             autocomplete="off" class="dp" />
@@ -5053,7 +5053,10 @@ class DatetimePickerWidget extends Widget {
                     buttonImage: './images/cal.png',
                     showOn:'both',
                     dateFormat: '<?php echo
-                        Format::dtfmt_php2js($dateFormat); ?>'
+                        Format::dtfmt_php2js($dateFormat); ?>',
+                    beforeShow: function(input, inst) {
+                        $(this).position({my: 'center bottom', at: 'center top', of: '#<?php echo $this->id; ?>'});
+                    }
                 });
             });
         </script>

Cheers.

[pehbeh]

Hi @JediKev

Thank you for your help. But unfortunately, even with the change, the behavior remains the same. The calendar is still positioned differently.

[pehbeh]

@JediKev

If you can replicate the issue with an official build of osTicket then please re-open this issue.

I can't do that myself in this issue, because I dosn't have the authorization. So i would be happy if the issue can be reopened, because the bug still exists even with the diff. Thanks.