Bug 34413 - Flat picker birth date field does not display properly on initial load on iOS
Summary: Flat picker birth date field does not display properly on initial load on iOS
Status: Pushed to oldstable
Alias: None
Product: Koha
Classification: Unclassified
Component: Patrons (show other bugs)
Version: Main
Hardware: All All
: P5 - low normal (vote)
Assignee: Owen Leonard
QA Contact: Emily Lamancusa
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2023-07-25 23:31 UTC by Christopher Brannon
Modified: 2023-11-14 15:34 UTC (History)
6 users (show)

See Also:
Change sponsored?: ---
Patch complexity: Trivial patch
Documentation contact:
Documentation submission:
Text to go in the release notes:
Version(s) released in:
23.11.00,23.05.06,22.11.12


Attachments
Screenshot - iPhone flatpickr (40.90 KB, image/png)
2023-11-08 22:05 UTC, Emily Lamancusa
Details
Bug 34413: Fix style of Flatpickr in iOS mobile view (2.26 KB, patch)
2023-11-09 13:52 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 34413: Fix style of Flatpickr in iOS mobile view (2.82 KB, patch)
2023-11-09 13:55 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 34413: Fix style of Flatpickr in iOS mobile view (2.88 KB, patch)
2023-11-09 15:18 UTC, Lucas Gass
Details | Diff | Splinter Review
Bug 34413: Fix style of Flatpickr in iOS mobile view (2.94 KB, patch)
2023-11-09 16:32 UTC, Emily Lamancusa
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
Description Christopher Brannon 2023-07-25 23:31:14 UTC
If you are using iOS (iPhone for my test), and create a new patron, the birth date field does not show.  there is a squishy blob in it's place.  Click on that, and the flatpicker comes up and you can enter the date.  Everything from that point forward looks fine.
Comment 1 Emily Lamancusa 2023-11-08 22:05:41 UTC
Created attachment 158678 [details]
Screenshot - iPhone flatpickr

Our staff confirmed this on three different versions of iPhone - screenshot attached in case it's helpful
Comment 2 Emily Lamancusa 2023-11-08 22:06:58 UTC
Version 22.11 for us - I guess you'd need an iPhone emulator to confirm whether it's still an issue on master?
Comment 3 Lucas Gass 2023-11-08 23:40:32 UTC
I cannot test this to confirm, but I think this CSS ( OPACUserCSS ) will fix the problem:

#opac-patron-registration .flatpickr {
   height:30px !important;
   width: 150px !important;
}
Comment 4 Owen Leonard 2023-11-09 13:52:55 UTC Comment hidden (obsolete)
Comment 5 Owen Leonard 2023-11-09 13:55:55 UTC
Created attachment 158716 [details] [review]
Bug 34413: Fix style of Flatpickr in iOS mobile view

This patch updates Flatpickr CSS in the OPAC and staff interface so that
date fields are displayed correctly in iOS mobile views.

To test, apply the patch and rebuild the OPAC and staff interface CSS.

- In the OPAC, click "Create new account"
- In the account entry form, confirm that the date of birth field looks
  correct and that the date-picker works as it should.
- In the staff client, go to Patrons -> New patron.
- Check the date of birth field in this form too.

This patch has been tested in the Xcode iOS device simulator with iOS
17. While I wasn't able to reproduce the problem in Firefox, I was able
to use the developer tools' responsive design mode to trigger the mobile
view and thus be able to see the styles which are being applied:

- In the OPAC, on the "Create new account" screen, open the Web
  Developer Tools panel (Tools -> Browser tools -> Web Developer Tools).
- Click the "Responsive Design Mode" button in the upper-right corner of
  the developer tools panel (it looks like a phone and tablet together).
- The main browser window will now how some settings at the top.
- In the first dropdown, choose an iPhone model.
- The date of birth field should now be styled differently because of
  the addition of a "flatpickr-mobile" style.
- Right-click the field and choose "Inspect." In the developer console
  you can see the styles which are being applied to the field. One of
  those should be ".flatpickr-input.flatpickr-mobile"
Comment 6 Lucas Gass 2023-11-09 15:17:20 UTC
I don't know how to test this in Ubuntu with k-t-d. So I applied Owen's changes to the ByWater model site and had a look with browserstack. 

It works so I am signing off, thanks Owen!
Comment 7 Lucas Gass 2023-11-09 15:18:02 UTC
Created attachment 158745 [details] [review]
Bug 34413: Fix style of Flatpickr in iOS mobile view

This patch updates Flatpickr CSS in the OPAC and staff interface so that
date fields are displayed correctly in iOS mobile views.

To test, apply the patch and rebuild the OPAC and staff interface CSS.

- In the OPAC, click "Create new account"
- In the account entry form, confirm that the date of birth field looks
  correct and that the date-picker works as it should.
- In the staff client, go to Patrons -> New patron.
- Check the date of birth field in this form too.

This patch has been tested in the Xcode iOS device simulator with iOS
17. While I wasn't able to reproduce the problem in Firefox, I was able
to use the developer tools' responsive design mode to trigger the mobile
view and thus be able to see the styles which are being applied:

- In the OPAC, on the "Create new account" screen, open the Web
  Developer Tools panel (Tools -> Browser tools -> Web Developer Tools).
- Click the "Responsive Design Mode" button in the upper-right corner of
  the developer tools panel (it looks like a phone and tablet together).
- The main browser window will now how some settings at the top.
- In the first dropdown, choose an iPhone model.
- The date of birth field should now be styled differently because of
  the addition of a "flatpickr-mobile" style.
- Right-click the field and choose "Inspect." In the developer console
  you can see the styles which are being applied to the field. One of
  those should be ".flatpickr-input.flatpickr-mobile"

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Comment 8 Emily Lamancusa 2023-11-09 16:32:39 UTC
Created attachment 158751 [details] [review]
Bug 34413: Fix style of Flatpickr in iOS mobile view

This patch updates Flatpickr CSS in the OPAC and staff interface so that
date fields are displayed correctly in iOS mobile views.

To test, apply the patch and rebuild the OPAC and staff interface CSS.

- In the OPAC, click "Create new account"
- In the account entry form, confirm that the date of birth field looks
  correct and that the date-picker works as it should.
- In the staff client, go to Patrons -> New patron.
- Check the date of birth field in this form too.

This patch has been tested in the Xcode iOS device simulator with iOS
17. While I wasn't able to reproduce the problem in Firefox, I was able
to use the developer tools' responsive design mode to trigger the mobile
view and thus be able to see the styles which are being applied:

- In the OPAC, on the "Create new account" screen, open the Web
  Developer Tools panel (Tools -> Browser tools -> Web Developer Tools).
- Click the "Responsive Design Mode" button in the upper-right corner of
  the developer tools panel (it looks like a phone and tablet together).
- The main browser window will now how some settings at the top.
- In the first dropdown, choose an iPhone model.
- The date of birth field should now be styled differently because of
  the addition of a "flatpickr-mobile" style.
- Right-click the field and choose "Inspect." In the developer console
  you can see the styles which are being applied to the field. One of
  those should be ".flatpickr-input.flatpickr-mobile"

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Signed-off-by: Emily Lamancusa <emily.lamancusa@montgomerycountymd.gov>
Comment 9 Emily Lamancusa 2023-11-09 16:38:50 UTC
Confirmed that the CSS from the patch solved the problem when added to our OPACUserCSS.

Incidentally, Lucas's CSS from comment 3 also works. :)

Thanks everyone! Passing QA
Comment 10 Tomás Cohen Arazi 2023-11-09 17:44:01 UTC
Pushed to master for 23.11.

Nice work everyone, thanks!
Comment 11 Fridolin Somers 2023-11-11 07:20:25 UTC
Pushed to 23.05.x for 23.05.06
Comment 12 Pedro Amorim 2023-11-14 15:02:07 UTC
Nice work everyone!

Pushed to 22.11.x for next release
Comment 13 Christopher Brannon 2023-11-14 15:34:11 UTC
(In reply to Pedro Amorim from comment #12)
> Nice work everyone!
> 
> Pushed to 22.11.x for next release

Grateful for that!