Bug 30383

Summary: Column suggestion is too wide when displaying more than 20 suggestions (suggestion.pl)
Product: Koha Reporter: Marjorie Barry-Vila <marjorie.barry-vila>
Component: AcquisitionsAssignee: Bugs List <koha-bugs>
Status: NEW --- QA Contact: Testopia <testopia>
Severity: enhancement    
Priority: P5 - low CC: kebliss, koha, r.delahunty
Version: Main   
Hardware: All   
OS: All   
GIT URL: Change sponsored?: ---
Patch complexity: --- Documentation contact:
Documentation submission: Text to go in the release notes:
Version(s) released in:
Circulation function:
Attachments: suggestion_table
CSS used to lock down 2 columns.

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.