Priority: Normal
Current State: Confirmed
Released In: n/a
Target Release:
Date picker in form appears at point date field was before scrolling. With a long form this causes usability issues!
- In Chrome, Edge, the date picker for form fields that were below the bottom of the browser window in the original render of the form will appear with the bottom edge of the popup aligned with the bottom edge of the window. Other date picker popups will appear where the original render had the date field before scrolling.
- In IE11, the date picker for form fields that were below the bottom of the browser window in the original render of the form will appear below the bottom of the end of the form page, only revealing itself when the user scrolls down beyond the end of the form.
- In neither case does the date picker popup move with scrolling.
- Date picker popups in normal topic text (with an input field) work and scroll as expected.
--
EdMcDonagh - 05 Mar 2019
Can you repro the problem here?
https://foswiki.org/Extensions/JSCalendarContrib#Displaying_the_calendar
--
MichaelDaum - 05 Mar 2019
Hi
MichaelDaum, thank you for looking at this.
I can't reproduce it there, because the problem relates to Data Forms - the linked to calendar works fine (as per normal topic text in the description above).
The Data Form attached to that topic, and to this one, do not have any date fields.
Is there somewhere I can mock up a Data Form with date fields so that I can reproduce the problem for you?
--
EdMcDonagh - 05 Mar 2019
Try to create a data form definition in the
Sandbox web and attach it to itself.
--
MichaelDaum - 05 Mar 2019
Thanks. Please can you add
TasksItem14826Form to
WebPreferences so I can finish the demo?
--
EdMcDonagh - 05 Mar 2019
I can confirm the problem. It is caused by the date picker being embeded in a tabpane. Once the tabpane is being scrolled down a bit will the date picker misplace the popup.
This is an error in the JSCalendar third party component that the jquery-ui datepicker does not suffer from.
My advice for you is to install
Extensions.MoreFormfieldsPlugin and replace the formfield type
date
with
date2
.
Would that work out for you as a way to mitigate the usability pain?
--
MichaelDaum - 06 Mar 2019
Thanks Michael - really appreciate you looking at this and for the suggested mitigation. We'll install that plugin and take a look, hopefully that will sort us out and maybe add other useful functionality!
As an aside, how did you add that Data Form to the topic without adding it to Web Preferences?
--
EdMcDonagh - 06 Mar 2019
I've edited it and manually appended
&formtemplate=TaskItem14826Form
to the url....
--
MichaelDaum - 06 Mar 2019