Since the staff interface redesign, the search patron results DataTable has filters activated at the top. Is it possible to add a way to turn these off? Alternatively, is it possible to change the dropdown selectors into a text search (as on the other columns)? The problem is that the dropdown filters include every library / patron category; this means that the columns are always the width of your longest library / longest patron category. Before the staff interface redesign, the width of these two columns were flexible. Since the redesign, if your system has any long library names or patron category names, the table breaks on width, causing a horizontal scrollbar. An example of how the library name displays: Before (on a smaller screen): Institut Protestant de Théologie After: Institut Protestant de Théologie Instead of a 12 character width column, it's a 32 character width column.
Created attachment 160193 [details] [review] Bug 34574: Limit datatables dropdown columns to a max of 200px Test plan: 1) Create a new patron category, visit: /cgi-bin/koha/admin/categories.pl?op=add_form 2) Add a category code, en enrollment period, a category type and a really long description like: "This is a real long description of the patron category code for demo purposes" 3) Now do the same but for a library, visit: /cgi-bin/koha/admin/branches.pl?op=add_form 4) Add a library code and a really long name like: "This is a real long library name for demo purposes" 5) Visit patrons home: /cgi-bin/koha/members/members-home.pl 6) Hit "Search". Notice the "library" and "category" columns grow in width to match the largest option (added in previous steps) 7) Apply patch, repeat 5) and 6). Notice the columns no longer grow in width.
Hi Sally, instead of providing an option to deactivate the filters, I've added a max width limit to the filter in the column header to prevent it from growing larger than 200px (I found this a reasonable max width but open to suggestions). This way, the filter is always there, but no longer grows to match the longest entry in the options. Let me know how/if this works.
Created attachment 160228 [details] [review] Bug 34574: Limit datatables dropdown columns to a max of 200px Test plan: 1) Create a new patron category, visit: /cgi-bin/koha/admin/categories.pl?op=add_form 2) Add a category code, en enrollment period, a category type and a really long description like: "This is a real long description of the patron category code for demo purposes" 3) Now do the same but for a library, visit: /cgi-bin/koha/admin/branches.pl?op=add_form 4) Add a library code and a really long name like: "This is a real long library name for demo purposes" 5) Visit patrons home: /cgi-bin/koha/members/members-home.pl 6) Hit "Search". Notice the "library" and "category" columns grow in width to match the largest option (added in previous steps) 7) Apply patch, repeat 5) and 6). Notice the columns no longer grow in width. Signed-off-by: Sally <sally.healey@cheshiresharedservices.gov.uk>
(In reply to Pedro Amorim from comment #2) > Hi Sally, instead of providing an option to deactivate the filters, I've > added a max width limit to the filter in the column header to prevent it > from growing larger than 200px (I found this a reasonable max width but open > to suggestions). > > This way, the filter is always there, but no longer grows to match the > longest entry in the options. > > Let me know how/if this works. Brilliant, thanks Pedro - works great.
This is too arbitrary. Why 200? :D The problem I see is if there are only few columns in the table: the select could be shorter than the column. I don't know how to fix that properly however...
Other example, in this case the select could be wider: https://snipboard.io/JpO58q.jpg
Created attachment 161444 [details] [review] Bug 34574: Limit datatables dropdown columns to a max of 200px Test plan: 1) Create a new patron category, visit: /cgi-bin/koha/admin/categories.pl?op=add_form 2) Add a category code, en enrollment period, a category type and a really long description like: "This is a real long description of the patron category code for demo purposes" 3) Now do the same but for a library, visit: /cgi-bin/koha/admin/branches.pl?op=add_form 4) Add a library code and a really long name like: "This is a real long library name for demo purposes" 5) Visit patrons home: /cgi-bin/koha/members/members-home.pl 6) Hit "Search". Notice the "library" and "category" columns grow in width to match the largest option (added in previous steps) 7) Apply patch, add the following CSS to IntranetUserCSS: .dt-select-filter{ max-width:200px; } 8) repeat 5) and 6). Notice the columns no longer grow in width. Signed-off-by: Sally <sally.healey@cheshiresharedservices.gov.uk>
Created attachment 161445 [details] [review] Bug 34574: Add CSS class to datatable select filter Test plan: 1) Create a new patron category, visit: /cgi-bin/koha/admin/categories.pl?op=add_form 2) Add a category code, en enrollment period, a category type and a really long description like: "This is a real long description of the patron category code for demo purposes" 3) Now do the same but for a library, visit: /cgi-bin/koha/admin/branches.pl?op=add_form 4) Add a library code and a really long name like: "This is a real long library name for demo purposes" 5) Visit patrons home: /cgi-bin/koha/members/members-home.pl 6) Hit "Search". Notice the "library" and "category" columns grow in width to match the largest option (added in previous steps) 7) Apply patch, add the following CSS to IntranetUserCSS: .dt-select-filter{ max-width:200px; } 8) repeat 5) and 6). Notice the columns no longer grow in width. Signed-off-by: Sally <sally.healey@cheshiresharedservices.gov.uk>
(In reply to Jonathan Druart from comment #5) > This is too arbitrary. Why 200? :D > > The problem I see is if there are only few columns in the table: the select > could be shorter than the column. > > I don't know how to fix that properly however... Thank you Jonathan, I agree, it's a bit arbitrary and not ideal. I've amended my patch to instead add a CSS class to the datatable filter select, giving staff members and admins an easy option to style it however they want. I've opened bug 35908 for further discussion. Does this seem reasonable?
Created attachment 162602 [details] [review] Bug 34574: Add CSS class to datatable select filter Test plan: 1) Create a new patron category, visit: /cgi-bin/koha/admin/categories.pl?op=add_form 2) Add a category code, en enrollment period, a category type and a really long description like: "This is a real long description of the patron category code for demo purposes" 3) Now do the same but for a library, visit: /cgi-bin/koha/admin/branches.pl?op=add_form 4) Add a library code and a really long name like: "This is a real long library name for demo purposes" 5) Visit patrons home: /cgi-bin/koha/members/members-home.pl 6) Hit "Search". Notice the "library" and "category" columns grow in width to match the largest option (added in previous steps) 7) Apply patch, add the following CSS to IntranetUserCSS: .dt-select-filter{ max-width:200px; } 8) repeat 5) and 6). Notice the columns no longer grow in width. Signed-off-by: Sally <sally.healey@cheshiresharedservices.gov.uk> Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Pushed for 24.05! Well done everyone, thank you!
Small useful enhancement, Pushed to 23.11.x for 23.11.06
Enhancement will not be backported to 23.05.x