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.
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
Created attachment 103789 [details] [review] Bug 25282: Use pull-left instead of pull-right to correctly display "actions" dropdown
Looks like this patch does the job but IIRC we already switched from left to right because of another problem (?)
(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.
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.
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
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.
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>
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?
(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.
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
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>
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>
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
Nice work everyone! Pushed to master for 20.05
does not apply to 19.11.x. not backported