Item14826: Date picker in form appears at point date field was before scrolling

pencil
Priority: Normal
Current State: Confirmed
Released In: n/a
Target Release:
Applies To: Extension
Component: JSCalendarContrib
Branches:
Reported By: EdMcDonagh
Waiting For:
Last Change By: MichaelDaum
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.... wink

-- MichaelDaum - 06 Mar 2019
 

ItemTemplate edit

Summary Date picker in form appears at point date field was before scrolling
ReportedBy EdMcDonagh
Codebase 2.1.6
SVN Range
AppliesTo Extension
Component JSCalendarContrib
Priority Normal
CurrentState Confirmed
WaitingFor
Checkins
ReleasedIn n/a
CheckinsOnBranches
trunkCheckins
masterCheckins
ItemBranchCheckins
Release02x01Checkins
Release02x00Checkins
Release01x01Checkins
Topic revision: r8 - 06 Mar 2019, MichaelDaum
The copyright of the content on this website is held by the contributing authors, except where stated elsewhere. See Copyright Statement. Creative Commons License    Legal Imprint    Privacy Policy