Browser support of the CSS calc() function is broad enough that we can use it to prevent the datepicker icon from wrapping below the form field.
Created attachment 107359 [details] [review] Bug 26061: Improve style of sidebar datepickers This patch makes a small change to the staff interface CSS so that datepicker form fields in sidebar forms don't force the datepicker icon onto a second line. The change uses the CSS calc() function to specify that form fields with a .hasDatepicker class (dynamically added by jqueryUI) have a width of 100% minus 20 pixels, leaving room for the datepicker icon. To test, apply the patch and rebuild the staff interface CSS (https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_interface). - View a page in the staff interface which has a datepicker field in a sidebar form and confirm that the icon stays on the same line as the firm field at varying browser widths. Examples: - Reports -> Saved SQL reports - Circulation -> Overdues - Acquisitions -> Late orders
Created attachment 107426 [details] [review] Bug 26061: Improve style of sidebar datepickers This patch makes a small change to the staff interface CSS so that datepicker form fields in sidebar forms don't force the datepicker icon onto a second line. The change uses the CSS calc() function to specify that form fields with a .hasDatepicker class (dynamically added by jqueryUI) have a width of 100% minus 20 pixels, leaving room for the datepicker icon. To test, apply the patch and rebuild the staff interface CSS (https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_interface). - View a page in the staff interface which has a datepicker field in a sidebar form and confirm that the icon stays on the same line as the firm field at varying browser widths. Examples: - Reports -> Saved SQL reports - Circulation -> Overdues - Acquisitions -> Late orders Signed-off-by: Sally <sally.healey@cheshiresharedservices.gov.uk>
Created attachment 107541 [details] [review] Bug 26061: Improve style of sidebar datepickers This patch makes a small change to the staff interface CSS so that datepicker form fields in sidebar forms don't force the datepicker icon onto a second line. The change uses the CSS calc() function to specify that form fields with a .hasDatepicker class (dynamically added by jqueryUI) have a width of 100% minus 20 pixels, leaving room for the datepicker icon. To test, apply the patch and rebuild the staff interface CSS (https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_interface). - View a page in the staff interface which has a datepicker field in a sidebar form and confirm that the icon stays on the same line as the firm field at varying browser widths. Examples: - Reports -> Saved SQL reports - Circulation -> Overdues - Acquisitions -> Late orders Signed-off-by: Sally <sally.healey@cheshiresharedservices.gov.uk>
I think this is a good improvement, but I wonder if those date fields wouldn't look a little nicer if they were even a little shorter - at the moment they are very wide compared to date fields in other places (patron record for example).
(In reply to Katrin Fischer from comment #4) > I think this is a good improvement, but I wonder if those date fields > wouldn't look a little nicer if they were even a little shorter The date fields in the sidebar are different than elsewhere because all form fields in the sidebar are styled to be the same width. I think this consistency looks good.
Pushed to master for 20.11, thanks to everybody involved!
enhancement will not be backported to 20.05.x series