Bug 21751

Summary: fixFloat toolbar not displaying properly in Chrome
Product: Koha Reporter: Lucas Gass <lucas>
Component: ListsAssignee: Owen Leonard <oleonard>
Status: CLOSED FIXED QA Contact: Testopia <testopia>
Severity: normal    
Priority: P5 - low CC: aleisha, dcook, eb, jonathan.druart, katrin.fischer, m.de.rooy, martin.renvoize, nengard, nick, oleonard
Version: master   
Hardware: All   
OS: All   
See Also: https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=22293
Change sponsored?: --- Patch complexity: Medium patch
Documentation contact: Documentation submission:
Text to go in the release notes:
Version(s) released in:
Bug Depends on: 21813, 21964    
Bug Blocks: 11375, 22045, 22293, 35643    
Attachments: screenshot of public list in Chrome
Screenshot of tabs in editing (staff interface)
Bug 21751: fixFloat toolbar not displaying properly in Chrome
Bug 21751: fixFloat toolbar not displaying properly in Chrome
Bug 21751: fixFloat toolbar not displaying properly in Chrome
Bug 21751: fixFloat toolbar not displaying properly in Chrome
Bug 21751: Replace fixFloat with HC-sticky to fix Chrome display
Bug 21751: Remove former fixFloat plugin
Bug 21751: Replace fixFloat with HC-sticky to fix Chrome display
Bug 21751: Remove former fixFloat plugin
Bug 21751: Replace fixFloat with HC-sticky to fix Chrome display
Bug 21751: Remove former fixFloat plugin
Bug 21751: Replace fixFloat with HC-sticky to fix Chrome display
Bug 21751: Remove former fixFloat plugin
Bug 21751: (follow-up) Correction to selectors
Bug 21751: Replace fixFloat with HC-sticky to fix Chrome display
Bug 21751: Remove former fixFloat plugin
Bug 21751: (follow-up) Correction to selectors
Bug 21751: Replace fixFloat with HC-sticky to fix Chrome display
Bug 21751: Remove former fixFloat plugin
Bug 21751: (follow-up) Correction to selectors

Description Lucas Gass 2018-11-01 16:07:46 UTC
Created attachment 81830 [details]
screenshot of public list in Chrome

There is a display issue in Chrome (Firefox seems unaffected) at cgi-bin/koha/virtualshelves/shelves.pl

The table header is overlapped by the toolbar (#searchheader) because of its absolute positioning. See attachment.
Comment 1 Lucas Gass 2018-11-01 16:18:13 UTC
Actually, this is effecting all pages where the "#searchheader" toolbar is present.
Comment 2 Jonathan Druart 2018-11-01 21:33:51 UTC
(In reply to Lucas Gass from comment #1)
> Actually, this is effecting all pages where the "#searchheader" toolbar is
> present.

Sure about that? On which other views do you recreate the problem?
Comment 3 Lucas Gass 2018-11-01 22:05:57 UTC
No, I may be wrong about that. I can only successfully recreate it on the lists view.
Comment 4 Jonathan Druart 2018-11-01 22:24:18 UTC
On the mailing list (https://lists.katipo.co.nz/pipermail/koha/2018-October/051753.html) Elaine reported an overlap of the tabs on top of the toolbar, but I cannot recreate it.
Comment 5 Jonathan Druart 2018-11-02 12:55:13 UTC
We could revert
  commit 592905a4d2d41a1a7b757c48fbac8fc6f025bf9b
  Bug 21139: (follow-up) Floating toolbars - Remove unecessary height

But I would prefer to find a better fix as it degrades the ergonomic for FF
Comment 6 Elaine Bradtke 2018-11-05 17:49:39 UTC
Created attachment 81974 [details]
Screenshot of tabs in editing (staff interface)
Comment 7 Elaine Bradtke 2018-11-05 17:51:36 UTC
There is also a display issue in the staff interface. The tabs are displaying strangely - covering the buttons (and less often, the buttons hide the tab numbers) when editing a catalogue record. But it's only a problem with some of the tabs: 1-4 and 8-9. The buttons and tabs still seem to function, but they don't display correctly.
It also only seems to happen in Chrome (it works fine in Firefox).
Comment 8 Owen Leonard 2018-11-09 19:29:06 UTC
I'm testing this as a replacement for fixFloat and it looks very promising.

https://github.com/somewebmedia/hc-sticky
Comment 9 Owen Leonard 2018-11-14 19:17:23 UTC Comment hidden (obsolete)
Comment 10 Katrin Fischer 2018-11-14 20:13:13 UTC
 - Authorities -> Create or edit an authority

It all worked really well until this one. Not sure how to describe it! When scrolling down the form fields remain visible while scrolling through the floating toolbar?
Comment 11 Katrin Fischer 2018-11-14 20:15:55 UTC
On the advanced search, click more options. Make the browser window width about half of he screen width. Scroll down - the toolbar vanishes when reaching the bottom. Tested in Chrome.
Comment 12 Jonathan Druart 2018-11-14 22:02:27 UTC
I have tried just 2 (on Firefox):

* http://pro.kohadev.org/cgi-bin/koha/members/memberentry.pl?op=modify&destination=circ&borrowernumber=5&categorycode=PT

=> JS error - "TypeError: c is null" hc-sticky_18.0600060.js:11:4777 

* http://pro.kohadev.org/cgi-bin/koha/acqui/supplier.pl?booksellerid=1&op=enter

=> The toolbar is *behind* the other divs (!)
https://screenshots.firefox.com/iWOtec6wmNaOTsbG/pro.kohadev.org
Comment 13 Owen Leonard 2018-11-15 15:28:06 UTC Comment hidden (obsolete)
Comment 14 Owen Leonard 2018-11-15 15:28:51 UTC
This amended patch includes a couple of tweaks and adds a step to the test plan: Regenerate the CSS.
Comment 15 Owen Leonard 2018-12-06 13:47:28 UTC Comment hidden (obsolete)
Comment 16 Jonathan Druart 2018-12-06 14:46:21 UTC
Maybe not blocker but it has the same issue we fixed with our previous changes:
https://screenshots.firefox.com/wV9LmstgxSUSUcaZ/pro.kohadev.org
Comment 17 Jonathan Druart 2018-12-06 14:54:43 UTC
The problem also exists and is more visible when editing a patron, and header filters are displayed.
I think we will need to play with the "top" parameter of the plugin (readjust it when filters are hidden/shown).
Comment 18 Owen Leonard 2018-12-06 17:18:51 UTC Comment hidden (obsolete)
Comment 19 Owen Leonard 2018-12-06 17:19:54 UTC
(In reply to Jonathan Druart from comment #16)
> Maybe not blocker but it has the same issue we fixed with our previous
> changes

I think this updated patch solves this problem.
Comment 20 Jonathan Druart 2018-12-06 17:55:36 UTC Comment hidden (obsolete)
Comment 21 Jonathan Druart 2018-12-06 17:55:42 UTC Comment hidden (obsolete)
Comment 22 Jonathan Druart 2018-12-06 17:56:33 UTC
(In reply to Owen Leonard from comment #19)
> (In reply to Jonathan Druart from comment #16)
> > Maybe not blocker but it has the same issue we fixed with our previous
> > changes
> 
> I think this updated patch solves this problem.

Indeed, thanks!

I amended the commit message of your patch to reflect what it actually does, I hope you are ok with it.
Comment 23 Jonathan Druart 2018-12-06 18:01:00 UTC
Maybe not: when editing a record, the selector .main seems to not be the best one
Comment 24 Owen Leonard 2018-12-17 14:40:40 UTC Comment hidden (obsolete)
Comment 25 Owen Leonard 2018-12-17 14:40:44 UTC Comment hidden (obsolete)
Comment 26 Katrin Fischer 2019-01-02 07:13:11 UTC
Hi Owen,

working through the test plan using Chrome and Firefox on Ubuntu:


- Patrons -> New patron
       - Test before and after expanding the patron search options at the
         top of the page
       - Test editing a patron too

The floating toolbar doesn't work here for me in either browser. The toolbar stays fixed when scrolling. 

Lists -> View list
- Tools -> Label creator -> New label batch -> Add items -> Search ->
       Results
- Open the plugin window for the 008 field

Would float in Firefox, but not in Chrome for me. Cleared the cache... maybe someone else can have a look?

All other toolbars behaved as expected.
Comment 27 David Cook 2019-01-07 05:54:42 UTC
Just confirming that I'm issues with the fixFloat plugin as well.
Comment 28 David Cook 2019-01-07 06:17:22 UTC
I imagine this must be affecting a number of people in production?
Comment 29 Katrin Fischer 2019-01-07 06:49:35 UTC
You could help by signing off bug 21813 ;)
Comment 30 David Cook 2019-01-08 00:00:40 UTC
(In reply to Katrin Fischer from comment #29)
> You could help by signing off bug 21813 ;)

I thought it was already passed QA?
Comment 31 Katrin Fischer 2019-01-08 00:03:43 UTC
Not when I commented - it has progressed since :)
Comment 32 David Cook 2019-01-08 00:09:22 UTC
(In reply to Katrin Fischer from comment #31)
> Not when I commented - it has progressed since :)

Ahhh excellent!
Comment 33 Owen Leonard 2019-01-08 19:24:57 UTC
Created attachment 83731 [details] [review]
Bug 21751: Replace fixFloat with HC-sticky to fix Chrome display

This patch replaces the fixFloat jQuery plugin with a new one: HC-sticky
(https://github.com/somewebmedia/hc-sticky). This plugin provides the
same functionality without the page-reflow problems fixFloat suffers
from.

To test, apply the patch and regenerate the staff client CSS. Test the
behavior of the floating toolbar on these pages:

 - Acquisitions -> Vendor -> Vendor details
 - Acquisitions -> Vendor -> View basket
   - On both these pages, test toolbar behavior before and after
     expanding the "Orders search" options at the top of the page.
 - Administration -> System preferences
 - Authorities -> Create or edit an authority
 - Catalog -> Advanced search
   - Search results
 - Catalog -> Item search
 - Cataloging -> Add or edit a record
   - Open the plugin window for the 008 field
 - Tools -> Label creator -> New label batch -> Add items -> Search ->
   Results
 - Patrons -> New patron
   - Test before and after expanding the patron search options at the
     top of the page
   - Test editing a patron too
 - Tools -> Automatic item modifications by age -> Edit
 - Tools -> Notices & slips -> Edit
 - Lists -> View list

Check that the About page has been updated with information about the
plugin.
Comment 34 Owen Leonard 2019-01-08 19:25:00 UTC
Created attachment 83732 [details] [review]
Bug 21751: Remove former fixFloat plugin
Comment 35 David Cook 2019-01-09 07:13:14 UTC
I've run out of time today but I want to test this tomorrow. Thanks, Owen!
Comment 36 David Cook 2019-01-09 07:14:01 UTC
Quick question: How does one "regenerate the staff client CSS"?
Comment 38 David Cook 2019-01-10 03:50:00 UTC
(In reply to Owen Leonard from comment #37)
> https://wiki.koha-community.org/wiki/
> Working_with_SCSS_in_the_OPAC_and_staff_client

You're a champion, Owen. I'll take a look ASAP.

Realized late last night I'm still doing half days so might need a bit more time to test this one..
Comment 39 David Cook 2019-01-10 03:50:31 UTC
Also going to be trying it in koha-testing-docker so wish me luck...
Comment 40 Lucas Gass 2019-01-11 21:57:39 UTC
this is awesome. one small note: when I apply this patch and go to cataloging > add record the #toolbar seems to loose its 'z-index' and displays underneath everything else instead of on top.
Comment 41 Owen Leonard 2019-01-14 13:49:41 UTC
Thanks for testing Lucas. Did you regenerate the staff client CSS before testing?
Comment 42 David Cook 2019-01-23 05:47:21 UTC
All looks good to me using Chrome Version 71.0.3578.98 (Official Build) (64-bit) on Windows 10.
Comment 43 David Cook 2019-01-23 05:50:31 UTC
Created attachment 84316 [details] [review]
Bug 21751: Replace fixFloat with HC-sticky to fix Chrome display

This patch replaces the fixFloat jQuery plugin with a new one: HC-sticky
(https://github.com/somewebmedia/hc-sticky). This plugin provides the
same functionality without the page-reflow problems fixFloat suffers
from.

To test, apply the patch and regenerate the staff client CSS. Test the
behavior of the floating toolbar on these pages:

 - Acquisitions -> Vendor -> Vendor details
 - Acquisitions -> Vendor -> View basket
   - On both these pages, test toolbar behavior before and after
     expanding the "Orders search" options at the top of the page.
 - Administration -> System preferences
 - Authorities -> Create or edit an authority
 - Catalog -> Advanced search
   - Search results
 - Catalog -> Item search
 - Cataloging -> Add or edit a record
   - Open the plugin window for the 008 field
 - Tools -> Label creator -> New label batch -> Add items -> Search ->
   Results
 - Patrons -> New patron
   - Test before and after expanding the patron search options at the
     top of the page
   - Test editing a patron too
 - Tools -> Automatic item modifications by age -> Edit
 - Tools -> Notices & slips -> Edit
 - Lists -> View list

Check that the About page has been updated with information about the
plugin.

Signed-off-by: David Cook <dcook@prosentient.com.au>
Comment 44 David Cook 2019-01-23 05:50:35 UTC
Created attachment 84317 [details] [review]
Bug 21751: Remove former fixFloat plugin

Signed-off-by: David Cook <dcook@prosentient.com.au>
Comment 45 Katrin Fischer 2019-01-27 10:36:52 UTC
I'd love for this to finally go in!

But sadly, I found 2 that won't work for me:

Acquisitions -> Vendor -> View basket
Patrons -> New patron

Error is the same:
<TypeError: c is null[Learn More] hc-sticky_18.1200008.js:11:4777 


Generated the CSS and did a restart_all... hope it's not something I've been missing. Tested with Firefox in Ubuntu.
Comment 46 Owen Leonard 2019-01-28 13:31:23 UTC
Created attachment 84476 [details] [review]
Bug 21751: (follow-up) Correction to selectors

This patch makes a couple of corrections to the selectors used by
hcsticky in targeting the position of the floating toolbar. These
changes were made necessary by changes made in recently-pushed patches.

To test, confirm that these two pages work correctly:

 - Acquisitions -> Vendor -> View basket
 - Patrons -> New patron
Comment 47 Lucas Gass 2019-01-28 19:01:34 UTC
Created attachment 84500 [details] [review]
Bug 21751: Replace fixFloat with HC-sticky to fix Chrome display

This patch replaces the fixFloat jQuery plugin with a new one: HC-sticky
(https://github.com/somewebmedia/hc-sticky). This plugin provides the
same functionality without the page-reflow problems fixFloat suffers
from.

To test, apply the patch and regenerate the staff client CSS. Test the
behavior of the floating toolbar on these pages:

 - Acquisitions -> Vendor -> Vendor details
 - Acquisitions -> Vendor -> View basket
   - On both these pages, test toolbar behavior before and after
     expanding the "Orders search" options at the top of the page.
 - Administration -> System preferences
 - Authorities -> Create or edit an authority
 - Catalog -> Advanced search
   - Search results
 - Catalog -> Item search
 - Cataloging -> Add or edit a record
   - Open the plugin window for the 008 field
 - Tools -> Label creator -> New label batch -> Add items -> Search ->
   Results
 - Patrons -> New patron
   - Test before and after expanding the patron search options at the
     top of the page
   - Test editing a patron too
 - Tools -> Automatic item modifications by age -> Edit
 - Tools -> Notices & slips -> Edit
 - Lists -> View list

Check that the About page has been updated with information about the
plugin.

Signed-off-by: David Cook <dcook@prosentient.com.au>

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Comment 48 Lucas Gass 2019-01-28 19:01:49 UTC
Created attachment 84501 [details] [review]
Bug 21751: Remove former fixFloat plugin

Signed-off-by: David Cook <dcook@prosentient.com.au>

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Comment 49 Lucas Gass 2019-01-28 19:01:52 UTC
Created attachment 84502 [details] [review]
Bug 21751: (follow-up) Correction to selectors

This patch makes a couple of corrections to the selectors used by
hcsticky in targeting the position of the floating toolbar. These
changes were made necessary by changes made in recently-pushed patches.

To test, confirm that these two pages work correctly:

 - Acquisitions -> Vendor -> View basket
 - Patrons -> New patron

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Comment 50 Katrin Fischer 2019-02-02 13:54:17 UTC
Created attachment 84660 [details] [review]
Bug 21751: Replace fixFloat with HC-sticky to fix Chrome display

This patch replaces the fixFloat jQuery plugin with a new one: HC-sticky
(https://github.com/somewebmedia/hc-sticky). This plugin provides the
same functionality without the page-reflow problems fixFloat suffers
from.

To test, apply the patch and regenerate the staff client CSS. Test the
behavior of the floating toolbar on these pages:

 - Acquisitions -> Vendor -> Vendor details
 - Acquisitions -> Vendor -> View basket
   - On both these pages, test toolbar behavior before and after
     expanding the "Orders search" options at the top of the page.
 - Administration -> System preferences
 - Authorities -> Create or edit an authority
 - Catalog -> Advanced search
   - Search results
 - Catalog -> Item search
 - Cataloging -> Add or edit a record
   - Open the plugin window for the 008 field
 - Tools -> Label creator -> New label batch -> Add items -> Search ->
   Results
 - Patrons -> New patron
   - Test before and after expanding the patron search options at the
     top of the page
   - Test editing a patron too
 - Tools -> Automatic item modifications by age -> Edit
 - Tools -> Notices & slips -> Edit
 - Lists -> View list

Check that the About page has been updated with information about the
plugin.

Signed-off-by: David Cook <dcook@prosentient.com.au>

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Comment 51 Katrin Fischer 2019-02-02 13:54:21 UTC
Created attachment 84661 [details] [review]
Bug 21751: Remove former fixFloat plugin

Signed-off-by: David Cook <dcook@prosentient.com.au>

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Comment 52 Katrin Fischer 2019-02-02 13:54:25 UTC
Created attachment 84662 [details] [review]
Bug 21751: (follow-up) Correction to selectors

This patch makes a couple of corrections to the selectors used by
hcsticky in targeting the position of the floating toolbar. These
changes were made necessary by changes made in recently-pushed patches.

To test, confirm that these two pages work correctly:

 - Acquisitions -> Vendor -> View basket
 - Patrons -> New patron

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Comment 53 Nick Clemens 2019-02-04 17:44:09 UTC
Awesome work all!

Pushed to master for 19.05
Comment 54 Aleisha Amohia 2019-02-08 04:36:57 UTC
This toolbar breaks /cgi-bin/koha/acqui/supplier.pl - I can't click anywhere on the form. I've made Bug 22293 for fixing this.
Comment 55 Martin Renvoize 2019-02-11 13:32:18 UTC
I'm not going to backport this one at this time as it feels too close to an enhancement (and the backport is non-trivial).  19.05 enhancement.
Comment 56 Owen Leonard 2019-02-11 13:46:53 UTC
*** Bug 16905 has been marked as a duplicate of this bug. ***
Comment 57 Jonathan Druart 2020-07-30 13:24:21 UTC
*** Bug 20857 has been marked as a duplicate of this bug. ***