Bug 30383 - Column suggestion is too wide when displaying more than 20 suggestions (suggestion.pl)
Summary: Column suggestion is too wide when displaying more than 20 suggestions (sugge...
Status: NEW
Alias: None
Product: Koha
Classification: Unclassified
Component: Acquisitions (show other bugs)
Version: Main
Hardware: All All
: P5 - low enhancement (vote)
Assignee: Bugs List
QA Contact: Testopia
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2022-03-28 14:06 UTC by Marjorie Barry-Vila
Modified: 2024-05-17 18:41 UTC (History)
3 users (show)

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


Attachments
suggestion_table (230.70 KB, image/png)
2022-03-28 14:06 UTC, Marjorie Barry-Vila
Details
CSS used to lock down 2 columns. (69.30 KB, image/png)
2023-11-21 11:07 UTC, Ray Delahunty
Details

Note You need to log in before you can comment on or make changes to this bug.
Description Marjorie Barry-Vila 2022-03-28 14:06:23 UTC
Created attachment 132333 [details]
suggestion_table

Hi,

The suggestion column becomes too wide when 50 or 100 suggestions are displayed in the different tabs of the table.

a problem of css ?

Regards
Marjorie
Comment 1 Owen Leonard 2022-03-28 18:46:47 UTC
I don't see this problem in my test system. What version of Koha are you using?
Comment 2 Marjorie Barry-Vila 2022-03-28 18:59:13 UTC
(In reply to Owen Leonard from comment #1)
> I don't see this problem in my test system. What version of Koha are you
> using?

Hi,
I tested on 20.05.03.

Looks like it mostly concerns the Accepted tab
https://www.screencast.com/t/smvcBvOlvnc

Marjorie
Comment 3 Owen Leonard 2022-03-29 10:46:39 UTC
Can't see the problem in 20.05.03. My next idea is to make sure we're trying it in the same browser.

The other possibility is that one of your suggestions which only appears onscreen when you switch to 100 results has a very long string of unbroken text. That would force the table cell to expand to accommodate it.
Comment 4 Marjorie Barry-Vila 2022-03-29 13:53:14 UTC
(In reply to Owen Leonard from comment #3)
> Can't see the problem in 20.05.03. My next idea is to make sure we're trying
> it in the same browser.
> 
> The other possibility is that one of your suggestions which only appears
> onscreen when you switch to 100 results has a very long string of unbroken
> text. That would force the table cell to expand to accommodate it.

I tested on firefox and chrome and I had the same problem.
But indeed a too long url in a note caused the enlargement of the column. I reduced the url and the display is correct now.
I guess it's not necessarily a bug?

Thank you for your time
Marjorie
Comment 5 Katrin Fischer 2022-06-19 11:47:58 UTC
Owen, do you think we should close this or is this something we could catch better? (maybe shortening contents after a certain length like we can do for the facets?)
Comment 6 Ray Delahunty 2023-11-21 11:07:32 UTC
Created attachment 159150 [details]
CSS used to lock down 2 columns.

We wanted two columns to be set to fixed width and our support company added some CSS to the IntranetUsercss feature we don't have access to (we see a link to it residing on the server). No promises it would work elsewhere without a tweak, but it looks good for us.

table#table_1.sorted.dataTable.no-footer > thead >tr >th:nth-child(2){
  width:250px;
}
table#table_1.sorted.dataTable.no-footer > thead >tr > th:nth-child(10){
  min-width: 180px;
  max-width: 180px;
}
table#table_1.sorted.dataTable.no-footer > tbody >tr > td:nth-child(2){
  width: 250px;
}
table#table_1.sorted.dataTable.no-footer > tbody >tr > td:nth-child(10){
  min-width: 180px;
  max-width: 180px;
}
table#table_2.sorted.dataTable.no-footer > thead >tr >th:nth-child(2) {
  width: 250px;
}
table#table_2.sorted.dataTable.no-footer > thead >tr >th:nth-child(10){
  min-width: 180px;
  max-width: 180px;
}
table#table_2.sorted.dataTable.no-footer > tbody >tr >td:nth-child(2){
  width: 250px;
}
table#table_2.sorted.dataTable.no-footer > tbody
>tr >td:nth-child(10){
  min-width: 180px;
  max-width: 180px;
}
table#table_3.sorted.dataTable.no-footer > thead >tr >th:nth-child(2) {
  width: 250px;
}
table#table_3.sorted.dataTable.no-footer > thead >tr >th:nth-child(10) {
  min-width: 180px;
  max-width: 180px;
}
table#table_3.sorted.dataTable.no-footer > tbody >tr >td:nth-child(2){
  width: 250px;
}
table#table_3.sorted.dataTable.no-footer > tbody >tr >td:nth-child(10){
  min-width: 180px;
  max-width: 180px;
}
table#table_4.sorted.dataTable.no-footer > thead >tr >th:nth-child(2) {
  width: 250px;
}
table#table_4.sorted.dataTable.no-footer > thead >tr >th:nth-child(10) {
  min-width: 180px;
  max-width: 180px;
}
table#table_4.sorted.dataTable.no-footer > tbody >tr >td:nth-child(2){
  width: 250px;
}
table#table_4.sorted.dataTable.no-footer > tbody >tr >td:nth-child(10){
  min-width: 180px;
  max-width: 180px;
}
table#table_5.sorted.dataTable.no-footer > thead >tr >th:nth-child(2) {
  width: 250px;
}
table#table_5.sorted.dataTable.no-footer > thead >tr >th:nth-child(10) {
  min-width: 180px;
  max-width: 180px;
}
table#table_5.sorted.dataTable.no-footer > tbody >tr >td:nth-child(2){
  width: 250px;
}
table#table_5.sorted.dataTable.no-footer > tbody >tr >td:nth-child(10){
  min-width: 180px;
  max-width: 180px;
}
table#table_6.sorted.dataTable.no-footer > thead >tr >th:nth-child(2) {
  width: 250px;
}
table#table_6.sorted.dataTable.no-footer > thead >tr >th:nth-child(10) {
  min-width: 180px;
  max-width: 180px;
}
table#table_6.sorted.dataTable.no-footer > tbody >tr >td:nth-child(2){
  width: 250px;
}
table#table_6.sorted.dataTable.no-footer > tbody >tr >td:nth-child(10){
  min-width: 180px;
  max-width: 180px;
}
table#table_7.sorted.dataTable.no-footer > thead >tr >th:nth-child(2) {
  width: 250px;
}
table#table_7.sorted.dataTable.no-footer > thead >tr >th:nth-child(10) {
  min-width: 180px;
  max-width: 180px;
}
table#table_7.sorted.dataTable.no-footer > tbody >tr >td:nth-child(2){
  width: 250px;
}
table#table_7.sorted.dataTable.no-footer > tbody >tr >td:nth-child(10){
  min-width: 180px;
  max-width: 180px;
}
table#table_8.sorted.dataTable.no-footer > thead >tr >th:nth-child(2) {
  width: 250px;
}
table#table_8.sorted.dataTable.no-footer > thead >tr >th:nth-child(10) {
  min-width: 180px;
  max-width: 180px;
}
table#table_8.sorted.dataTable.no-footer > tbody >tr >td:nth-child(2){
  width: 250px;
}
table#table_8.sorted.dataTable.no-footer > tbody >tr >td:nth-child(10){
  min-width:180px;
  max-width: 180px;
}
table.sorted.dataTable.no-footer > tbody >tr >td:nth-child(2) >div.suggestion_note{
  width: 250px;
  height: fit-content;
  overflow-wrap: break-word;
  word-wrap: break-word;
  -ms-word-break: break-all;
  word-break: break-word;
}
Comment 7 Katie Bliss 2023-11-22 17:47:30 UTC
If it helps, I also see this problem in 22.11.10.