Bug 21751 - fixFloat toolbar not displaying properly in Chrome
Summary: fixFloat toolbar not displaying properly in Chrome
Status: Signed Off
Alias: None
Product: Koha
Classification: Unclassified
Component: Lists (show other bugs)
Version: master
Hardware: All All
: P5 - low normal (vote)
Target Milestone: ---
Assignee: Owen Leonard
QA Contact: Testopia
URL:
Whiteboard:
Keywords:
Depends on:
Blocks: 11375
  Show dependency treegraph
 
Reported: 2018-11-01 16:07 UTC by Lucas Gass
Modified: 2018-12-06 18:01 UTC (History)
5 users (show)

See Also:
Change sponsored?: ---
Patch complexity: Medium patch
Bot Control: ---
When did the bot last check this:
Who signed the patch off:
Text to go in the release notes:


Attachments
screenshot of public list in Chrome (141.95 KB, image/png)
2018-11-01 16:07 UTC, Lucas Gass
Details
Screenshot of tabs in editing (staff interface) (94.02 KB, image/jpeg)
2018-11-05 17:49 UTC, Elaine Bradtke
Details
Bug 21751: fixFloat toolbar not displaying properly in Chrome (32.59 KB, patch)
2018-11-14 19:17 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 21751: fixFloat toolbar not displaying properly in Chrome (123.56 KB, patch)
2018-11-15 15:28 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 21751: fixFloat toolbar not displaying properly in Chrome (32.65 KB, patch)
2018-12-06 13:47 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 21751: fixFloat toolbar not displaying properly in Chrome (36.59 KB, patch)
2018-12-06 17:18 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 21751: Replace fixFloat with HC-sticky to fix Chrome display (36.79 KB, patch)
2018-12-06 17:55 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 21751: Remove former fixFloat plugin (3.27 KB, patch)
2018-12-06 17:55 UTC, Jonathan Druart
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
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
Created attachment 82924 [details] [review]
Bug 21751: fixFloat toolbar not displaying properly in Chrome

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 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
Created attachment 82925 [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: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Comment 21 Jonathan Druart 2018-12-06 17:55:42 UTC
Created attachment 82926 [details] [review]
Bug 21751: Remove former fixFloat plugin

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
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