Summary: | Datatables column dropdown select filter does not have a CSS class | ||
---|---|---|---|
Product: | Koha | Reporter: | Sally <sally.healey> |
Component: | Patrons | Assignee: | Pedro Amorim <pedro.amorim> |
Status: | RESOLVED FIXED | QA Contact: | Jonathan Druart <jonathan.druart> |
Severity: | enhancement | ||
Priority: | P5 - low | CC: | fridolin.somers, gmcharlt, jonathan.druart, kyle.m.hall, lucas, martin.renvoize, oleonard, pedro.amorim |
Version: | Main | Keywords: | Sandbox |
Hardware: | All | ||
OS: | All | ||
See Also: | https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=34575 | ||
Change sponsored?: | --- | Patch complexity: | --- |
Documentation contact: | Documentation submission: | ||
Text to go in the release notes: | Version(s) released in: |
24.05.00,23.11.06
|
|
Circulation function: | |||
Bug Depends on: | |||
Bug Blocks: | 35908 | ||
Attachments: |
Bug 34574: Limit datatables dropdown columns to a max of 200px
Bug 34574: Limit datatables dropdown columns to a max of 200px Bug 34574: Limit datatables dropdown columns to a max of 200px Bug 34574: Add CSS class to datatable select filter Bug 34574: Add CSS class to datatable select filter |
Description
Sally
2023-08-18 13:06:29 UTC
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 |