Bug 34574 - Datatables column dropdown select filter does not have a CSS class
Summary: Datatables column dropdown select filter does not have a CSS class
Status: Passed QA
Alias: None
Product: Koha
Classification: Unclassified
Component: Patrons (show other bugs)
Version: master
Hardware: All All
: P5 - low enhancement (vote)
Assignee: Pedro Amorim
QA Contact: Jonathan Druart
URL:
Keywords: Sandbox
Depends on:
Blocks: 35908
  Show dependency treegraph
 
Reported: 2023-08-18 13:06 UTC by Sally
Modified: 2024-02-29 15:05 UTC (History)
6 users (show)

See Also:
Change sponsored?: ---
Patch complexity: ---
Documentation contact:
Documentation submission:
Text to go in the release notes:
Version(s) released in:


Attachments
Bug 34574: Limit datatables dropdown columns to a max of 200px (1.88 KB, patch)
2023-12-21 14:14 UTC, Pedro Amorim
Details | Diff | Splinter Review
Bug 34574: Limit datatables dropdown columns to a max of 200px (1.95 KB, patch)
2023-12-22 09:45 UTC, Biblibre Sandboxes
Details | Diff | Splinter Review
Bug 34574: Limit datatables dropdown columns to a max of 200px (2.03 KB, patch)
2024-01-25 16:16 UTC, Pedro Amorim
Details | Diff | Splinter Review
Bug 34574: Add CSS class to datatable select filter (2.02 KB, patch)
2024-01-25 16:16 UTC, Pedro Amorim
Details | Diff | Splinter Review
Bug 34574: Add CSS class to datatable select filter (2.09 KB, patch)
2024-02-29 13:51 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 Sally 2023-08-18 13:06:29 UTC
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.
Comment 1 Pedro Amorim 2023-12-21 14:14:43 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.
Comment 2 Pedro Amorim 2023-12-21 14:34:14 UTC
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.
Comment 3 Biblibre Sandboxes 2023-12-22 09:45:01 UTC
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>
Comment 4 Sally 2023-12-22 09:46:21 UTC
(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.
Comment 5 Jonathan Druart 2024-01-25 11:20:55 UTC
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...
Comment 6 Jonathan Druart 2024-01-25 11:22:53 UTC
Other example, in this case the select could be wider: https://snipboard.io/JpO58q.jpg
Comment 7 Pedro Amorim 2024-01-25 16:16:09 UTC Comment hidden (obsolete)
Comment 8 Pedro Amorim 2024-01-25 16:16:48 UTC
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>
Comment 9 Pedro Amorim 2024-01-25 16:22:50 UTC
(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?
Comment 10 Jonathan Druart 2024-02-29 13:51:36 UTC
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>