Bug 27889 - Form fields in OPAC are "out of shape"
Summary: Form fields in OPAC are "out of shape"
Status: CLOSED FIXED
Alias: None
Product: Koha
Classification: Unclassified
Component: OPAC (show other bugs)
Version: Main
Hardware: All All
: P5 - low normal (vote)
Assignee: Owen Leonard
QA Contact: Testopia
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2021-03-06 00:36 UTC by Katrin Fischer
Modified: 2021-12-13 21:10 UTC (History)
4 users (show)

See Also:
Change sponsored?: ---
Patch complexity: Small patch
Documentation contact:
Documentation submission:
Text to go in the release notes:
This patch tweaks the CSS for the advanced search form in the OPAC so that it adjusts well at various browser widths, including preventing the form from taking up the whole width of the page at higher browser widths.
Version(s) released in:
21.05.00,20.11.05


Attachments
Bug 27889: Adjust responsive width of OPAC advanced search form (3.34 KB, patch)
2021-03-16 16:27 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 27889: (follow-up) Adjust width of OpacAddMastheadLibraryPulldown (1.39 KB, patch)
2021-03-16 17:49 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 27889: Adjust responsive width of OPAC advanced search form (3.39 KB, patch)
2021-03-31 19:02 UTC, David Nind
Details | Diff | Splinter Review
Bug 27889: (follow-up) Adjust width of OpacAddMastheadLibraryPulldown (1.43 KB, patch)
2021-03-31 19:02 UTC, David Nind
Details | Diff | Splinter Review
Buge 27889 - Screenshots of more options display (115.76 KB, application/pdf)
2021-04-01 17:47 UTC, David Nind
Details
Bug 27889: Adjust responsive width of OPAC advanced search form (3.45 KB, patch)
2021-04-03 13:55 UTC, Katrin Fischer
Details | Diff | Splinter Review
Bug 27889: (follow-up) Adjust width of OpacAddMastheadLibraryPulldown (1.49 KB, patch)
2021-04-03 13:55 UTC, Katrin Fischer
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
Description Katrin Fischer 2021-03-06 00:36:45 UTC
There is something weird going on with different input fields in the OPAC.

Examples:
- OPAC > Advanced search: The search fields are suddenly as wide as the screen.
- When OpacAddMastheadLibraryPulldown is active, it is much wider than the longest entry.

I noticed these on 20.05.03 - so it would be nice to have a fix for these things with 20.05.04
Comment 1 Katrin Fischer 2021-03-09 11:54:48 UTC
On 20.11.03 I also see that the pull downs all have a wrong serif font. I cleaned out OpacUserJs and OpacUserCSS for testing.
Comment 3 Henry Bolshaw 2021-03-09 15:39:51 UTC
Are you using Firefox? Could the serif font issue be the same issue of bug 27566?

I would have guessed that the input fields issue was related to the bootstrap upgrade and the new form-control class but perhaps not if it's appearing in 20.05...
Comment 4 Katrin Fischer 2021-03-09 22:45:49 UTC
Sorry Henry, just noticed my typo in the first comment. It's 20.11.03 I have confirmed it in and master.

bug 27566 could help - I'll try to test, thx for pointing it out!

I think the form fields being too long is a different issue tho.
Comment 5 Owen Leonard 2021-03-16 16:27:02 UTC
Created attachment 118336 [details] [review]
Bug 27889: Adjust responsive width of OPAC advanced search form

This patch tweaks the CSS for the advanced search form in the OPAC so
that it adjusts well at various browser widths, including preventing the
form from taking up the whole width of the page at higher browser
widths.

To test, apply the patch and rebuild the OPAC CSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client).

- In the OPAC, go to the advanced search page.
- Test the appearance of the fields in the first "Search for" section,
  confirming that everything adjusts well at all widths large and small.
- Click the "More options" button and test that configuration as well.
Comment 6 Owen Leonard 2021-03-16 17:49:12 UTC
Created attachment 118343 [details] [review]
Bug 27889: (follow-up) Adjust width of OpacAddMastheadLibraryPulldown

This patch adds some responsive classes to the
OpacAddMastheadLibraryPulldown container so that it will adjust better
at various browser widths.
Comment 7 David Nind 2021-03-31 19:02:29 UTC
Created attachment 119059 [details] [review]
Bug 27889: Adjust responsive width of OPAC advanced search form

This patch tweaks the CSS for the advanced search form in the OPAC so
that it adjusts well at various browser widths, including preventing the
form from taking up the whole width of the page at higher browser
widths.

To test, apply the patch and rebuild the OPAC CSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client).

- In the OPAC, go to the advanced search page.
- Test the appearance of the fields in the first "Search for" section,
  confirming that everything adjusts well at all widths large and small.
- Click the "More options" button and test that configuration as well.

Signed-off-by: David Nind <david@davidnind.com>
Comment 8 David Nind 2021-03-31 19:02:33 UTC
Created attachment 119060 [details] [review]
Bug 27889: (follow-up) Adjust width of OpacAddMastheadLibraryPulldown

This patch adds some responsive classes to the
OpacAddMastheadLibraryPulldown container so that it will adjust better
at various browser widths.

Signed-off-by: David Nind <david@davidnind.com>
Comment 9 David Nind 2021-03-31 19:12:07 UTC
The changes worked fine on the latest Firefox on Ubuntu 18.04. 

One minor thing I noticed was that in the OPAC advanced search with more options, if one of the values (such as Subject and broader terms) is selected, the form doesn't display it in full and it gets cut off. (The drop down list is fine).
Comment 10 Owen Leonard 2021-03-31 20:15:43 UTC
David I'm not sure I understand what you mean. Could you attach a screenshot?
Comment 11 David Nind 2021-04-01 17:47:35 UTC
Created attachment 119085 [details]
Buge 27889 - Screenshots of more options display

Hi Owen.

Before and after screenshots showing what I tried to explain!

After an advanced search option is selected it does not display to the full width of the option text.

David
Comment 12 Katrin Fischer 2021-04-03 13:50:01 UTC
Updatingbug descripton - we have taken care of the fonts on bug 27566.
Comment 13 Katrin Fischer 2021-04-03 13:55:31 UTC
Created attachment 119152 [details] [review]
Bug 27889: Adjust responsive width of OPAC advanced search form

This patch tweaks the CSS for the advanced search form in the OPAC so
that it adjusts well at various browser widths, including preventing the
form from taking up the whole width of the page at higher browser
widths.

To test, apply the patch and rebuild the OPAC CSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client).

- In the OPAC, go to the advanced search page.
- Test the appearance of the fields in the first "Search for" section,
  confirming that everything adjusts well at all widths large and small.
- Click the "More options" button and test that configuration as well.

Signed-off-by: David Nind <david@davidnind.com>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Comment 14 Katrin Fischer 2021-04-03 13:55:35 UTC
Created attachment 119153 [details] [review]
Bug 27889: (follow-up) Adjust width of OpacAddMastheadLibraryPulldown

This patch adds some responsive classes to the
OpacAddMastheadLibraryPulldown container so that it will adjust better
at various browser widths.

Signed-off-by: David Nind <david@davidnind.com>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Comment 15 Katrin Fischer 2021-04-03 13:58:11 UTC
The length of the input fields looks ok to me on different screen sizes. I could not replicate what David showed in the screenshots. Might need some fine-tuning later, but I believe this is already a fix for the regression.
Comment 16 Jonathan Druart 2021-04-06 13:58:03 UTC
Pushed to master for 21.05, thanks to everybody involved!
Comment 17 Katrin Fischer 2021-04-15 06:53:49 UTC
(In reply to Jonathan Druart from comment #16)
> Pushed to master for 21.05, thanks to everybody involved!

This also appears in 20.11, could it please be backported?
Comment 18 Fridolin Somers 2021-04-15 10:53:32 UTC
Pushed to 20.11.x for 20.11.05
Comment 19 Katrin Fischer 2021-04-15 11:54:43 UTC
(In reply to Fridolin Somers from comment #18)
> Pushed to 20.11.x for 20.11.05
Thanks Frido!
Comment 20 Andrew Fuerste-Henry 2021-04-24 17:04:50 UTC
Issues not present in 20.05, not backported. Please chime in if I'm wrong and this is needed.