Bug 25282

Summary: Menu for Action menubutton in dataTables like MARC frameworks page separated from the button
Product: Koha Reporter: Phil Ringnalda <phil>
Component: TemplatesAssignee: Owen Leonard <oleonard>
Status: CLOSED FIXED QA Contact: Testopia <testopia>
Severity: trivial    
Priority: P5 - low CC: 1joynelson, jonathan.druart
Version: master   
Hardware: All   
OS: All   
Change sponsored?: --- Patch complexity: Small patch
Documentation contact: Documentation submission:
Text to go in the release notes:
Version(s) released in:
20.05.00
Bug Depends on:    
Bug Blocks: 25702    
Attachments: Screenshot of the button/menu separation
Bug 25282: Use pull-left instead of pull-right to correctly display "actions" dropdown
Bug 25282: Correct Bootstrap dropdown button markup
Bug 25282: Correct Bootstrap dropdown button markup
Bug 25282: (follow-up) More corrections
Bug 25282: Correct Bootstrap dropdown button markup
Bug 25282: (follow-up) More corrections

Description Phil Ringnalda 2020-04-25 00:38:58 UTC
Created attachment 103710 [details]
Screenshot of the button/menu separation

Nothing in /cgi-bin/koha/admin/biblio_framework.pl keeps the column with the Actions button (or any other column) at a fixed width, so when you open the menu and it aligns with the right side of the column, how far it flies away from the button depends on how wide your browser window is.
Comment 1 Phil Ringnalda 2020-04-26 04:45:21 UTC
Not just that one, it's any dataTable that ends with a drop-down Actions button, like /cgi-bin/koha/admin/aqbudgetperiods.pl or /cgi-bin/koha/rotating_collections/rotatingCollections.pl
Comment 2 Jonathan Druart 2020-04-27 13:16:36 UTC
Created attachment 103789 [details] [review]
Bug 25282: Use pull-left instead of pull-right to correctly display "actions" dropdown
Comment 3 Jonathan Druart 2020-04-27 13:17:18 UTC
Looks like this patch does the job but IIRC we already switched from left to right because of another problem (?)
Comment 4 Owen Leonard 2020-04-27 16:52:56 UTC
(In reply to Jonathan Druart from comment #3)
> Looks like this patch does the job but IIRC we already switched from left to
> right because of another problem (?)

Yes, because it's possible for the menu to disappear off the right side of the screen at lower browser widths or with languages which have longer menu item text.

While using "pull-left" fixes the symptom of the problem, I believe the real issue is that Bootstrap is calculating the position of the menu button before DataTables draws the table.

Whatever solution we come up with will need to be tested with any DataTable that has a Bootstrap menu button in it.
Comment 5 Owen Leonard 2020-04-27 20:57:19 UTC
Not a CSS problem after all but a markup problem. The <div class="drop[up/down]"> surrounding the menu should have a "btn-group" class as well.
Comment 6 Owen Leonard 2020-04-27 22:04:36 UTC
Created attachment 103815 [details] [review]
Bug 25282: Correct Bootstrap dropdown button markup

Incorrect markup surrounding Bootstrap dropdown buttons causes display
problems with the buttons are in a DataTable. Dropdown wrapper <div>s
must have a "btn-group" class.

To reproduce the problem, look at the MARC bibliographic frameworks
page. The "Actions" menu when triggered will not line up with the
button.

In almost all cases, dropdown buttons inside tables should also have the
"dropup" class on their wrapper so that the menu appears above the
button. This prevents the menu from disappearing off the bottom of the
window when the button is positioned low in the viewport.

To test, apply the patch and test the button menus in tables on the
following pages:

- Acquisitions -> Invoices
- Acquisitions -> Add to order -> From external source -> Results
- Acquisitions -> Suggestions
- Administration -> Budgets
- Administration -> Funds
- Administration -> Authority types
- Administration -> Authority types -> MARC structure
- Administration -> MARC bibliographic frameworks
- Administration -> MARC bibliographic frameworks -> MARC structure
- Administration -> OAI sets configuration
- Administration -> Z39.50/SRU servers
- Authorities -> Authority search results
- Authorities -> New from Z39.50/SRU -> Search results
- Cataloging -> Edit items
- Cataloging -> New from Z39.50/SRU -> Search results
- Circulation -> Article requests
- Reports -> Saved reports
- Tools -> Patron lists
- Tools -> Rotating collections
- Serials -> Serials search results
Comment 7 Phil Ringnalda 2020-04-27 23:07:48 UTC
Not a current problem, just something to worry about in the future: Authorities -> New from Z39.50/SRU -> Search results doesn't have much clutter above the top result, so a small font or one added action could push the menu for the top result up above the top of the window. Everything else has more than enough headroom.
Comment 8 Phil Ringnalda 2020-04-27 23:09:48 UTC
Created attachment 103816 [details] [review]
Bug 25282: Correct Bootstrap dropdown button markup

Incorrect markup surrounding Bootstrap dropdown buttons causes display
problems with the buttons are in a DataTable. Dropdown wrapper <div>s
must have a "btn-group" class.

To reproduce the problem, look at the MARC bibliographic frameworks
page. The "Actions" menu when triggered will not line up with the
button.

In almost all cases, dropdown buttons inside tables should also have the
"dropup" class on their wrapper so that the menu appears above the
button. This prevents the menu from disappearing off the bottom of the
window when the button is positioned low in the viewport.

To test, apply the patch and test the button menus in tables on the
following pages:

- Acquisitions -> Invoices
- Acquisitions -> Add to order -> From external source -> Results
- Acquisitions -> Suggestions
- Administration -> Budgets
- Administration -> Funds
- Administration -> Authority types
- Administration -> Authority types -> MARC structure
- Administration -> MARC bibliographic frameworks
- Administration -> MARC bibliographic frameworks -> MARC structure
- Administration -> OAI sets configuration
- Administration -> Z39.50/SRU servers
- Authorities -> Authority search results
- Authorities -> New from Z39.50/SRU -> Search results
- Cataloging -> Edit items
- Cataloging -> New from Z39.50/SRU -> Search results
- Circulation -> Article requests
- Reports -> Saved reports
- Tools -> Patron lists
- Tools -> Rotating collections
- Serials -> Serials search results

Signed-off-by: Phil Ringnalda <phil@chetcolibrary.org>
Comment 9 Jonathan Druart 2020-04-28 08:54:57 UTC
Owen that seems to fix the problem instead.
But I am wondering why, for instance, it works for
  koha-tmpl/intranet-tmpl/prog/en/modules/plugins/plugins-home.tt
We have other occurrences of '<div class="dropdown">'. Should we not remove them all, even if not problematic?
Comment 10 Owen Leonard 2020-04-28 11:13:31 UTC
(In reply to Jonathan Druart from comment #9)
> We have other occurrences of '<div class="dropdown">'. Should we not remove
> them all, even if not problematic?

I didn't deliberately exclude any instances, I simply missed them.
Comment 11 Owen Leonard 2020-04-28 11:31:16 UTC
Created attachment 103851 [details] [review]
Bug 25282: (follow-up) More corrections

This patch adds more corrections missed in the first patch:

- Tools -> Patron clubs (in the Clubs table)
- Circulation -> Article requests (removed a couple of divs made
  redundant by the re-used BLOCK)
- Tools -> Plugins home
Comment 12 Jonathan Druart 2020-04-28 12:14:10 UTC
Created attachment 103852 [details] [review]
Bug 25282: Correct Bootstrap dropdown button markup

Incorrect markup surrounding Bootstrap dropdown buttons causes display
problems with the buttons are in a DataTable. Dropdown wrapper <div>s
must have a "btn-group" class.

To reproduce the problem, look at the MARC bibliographic frameworks
page. The "Actions" menu when triggered will not line up with the
button.

In almost all cases, dropdown buttons inside tables should also have the
"dropup" class on their wrapper so that the menu appears above the
button. This prevents the menu from disappearing off the bottom of the
window when the button is positioned low in the viewport.

To test, apply the patch and test the button menus in tables on the
following pages:

- Acquisitions -> Invoices
- Acquisitions -> Add to order -> From external source -> Results
- Acquisitions -> Suggestions
- Administration -> Budgets
- Administration -> Funds
- Administration -> Authority types
- Administration -> Authority types -> MARC structure
- Administration -> MARC bibliographic frameworks
- Administration -> MARC bibliographic frameworks -> MARC structure
- Administration -> OAI sets configuration
- Administration -> Z39.50/SRU servers
- Authorities -> Authority search results
- Authorities -> New from Z39.50/SRU -> Search results
- Cataloging -> Edit items
- Cataloging -> New from Z39.50/SRU -> Search results
- Circulation -> Article requests
- Reports -> Saved reports
- Tools -> Patron lists
- Tools -> Rotating collections
- Serials -> Serials search results

Signed-off-by: Phil Ringnalda <phil@chetcolibrary.org>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Comment 13 Jonathan Druart 2020-04-28 12:14:13 UTC
Created attachment 103853 [details] [review]
Bug 25282: (follow-up) More corrections

This patch adds more corrections missed in the first patch:

- Tools -> Patron clubs (in the Clubs table)
- Circulation -> Article requests (removed a couple of divs made
  redundant by the re-used BLOCK)
- Tools -> Plugins home

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Comment 14 Jonathan Druart 2020-04-28 12:14:37 UTC
From IRC:
 < Joubu> oleonard: there are 2 more .dropdown in opac-detail-sidebar.inc
 < oleonard> Joubu: I limited my search to the staff client since that's where the problematic combination of DataTable + dropdown happens
Comment 15 Martin Renvoize 2020-04-29 15:25:32 UTC
Nice work everyone!

Pushed to master for 20.05
Comment 16 Joy Nelson 2020-05-08 22:13:45 UTC
does not apply to 19.11.x.  not backported