I haven’t checked master yet, but in the 17.xx versions, I’m noticing it is really difficult to click the dropdown for “List prices are:” in “Ordering information” on /cgi-bin/koha/acqui/supplier.pl. When I look using the F12 tools in Chrome, I see that later “ol” elements are overlapping earlier “li” elements. So the “ol” for the tax options is sitting on top of the “li” for “List prices are:”. Only a tiny part of the “li” is clickable underneath that “ol”. It looks like the floats in the “li” element are causing the sizing of the “ol” to be no good. See https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context. There are a number of strategies for fixing this but I’m not sure what the best one would be here.
Still an issue in 18.11.x, although it doesn't look like floats. Rather than the position for a few "ol" elements with the radio class are relative and that's causing the problem.
Created attachment 83685 [details] [review] Bug 21089: Overlapping elements in ordering information on acqui/supplier.pl This patch changes the HTML structure of the vendor edit page so that the markup is a little simpler. CSS is modified to match. This structure should serve as a model for other similar form structures: <fieldset class="rows"> <ol> <li> <label>General label:</label> <label class="radio"> Specific label 1 <input type="radio" /> </label> <label class="radio"> Specific label 2 <input type="radio" /> </label> </li> </ol> </fieldset> To test, apply the patch and regenerate the staff client CSS. - Go to Acquisitions -> Vendor search -> Vendor -> Edit vendor - In the "Ordering information" section, confirm that the position of radio buttons looks correct. - Confirm that radio button labels work correctly. - Confirm that the adjacent dropdown menus work well.
The radio buttons look wonky to me. Some labels are to the button's left, while others are on top of it. https://imgur.com/eAkhNYo The dropdowns work fine.
Thanks for testing José-Mario. Did you regenerate the staff client CSS before testing? https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client
I did not, that is surely why it doesn't look right.
I'm trying this now... Currently updating https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client to work with koha-testing-docker...
Having issues with koha-testing-docker running in Docker Desktop on Windows... Although that reminds me of a little workaround I did so that I wouldn't have to deal with Windows...
Moved my Koha git repo into an actual Docker volume, so it exists on the Linux VM and not on my Windows host and shared as a bind mount. That removes the OS issues I seemed to be experiencing. I'd already increased the default disk space in the Hyper-V VM, and now I increased the CPU and RAM, and now git is working much much better in koha-testing-docker on Windows. Now to the actual testing...
Created attachment 84315 [details] [review] Bug 21089: Overlapping elements in ordering information on acqui/supplier.pl This patch changes the HTML structure of the vendor edit page so that the markup is a little simpler. CSS is modified to match. This structure should serve as a model for other similar form structures: <fieldset class="rows"> <ol> <li> <label>General label:</label> <label class="radio"> Specific label 1 <input type="radio" /> </label> <label class="radio"> Specific label 2 <input type="radio" /> </label> </li> </ol> </fieldset> To test, apply the patch and regenerate the staff client CSS. - Go to Acquisitions -> Vendor search -> Vendor -> Edit vendor - In the "Ordering information" section, confirm that the position of radio buttons looks correct. - Confirm that radio button labels work correctly. - Confirm that the adjacent dropdown menus work well. Signed-off-by: David Cook <dcook@prosentient.com.au>
Thanks for this, Owen! It looks much much better with your changes.
I take it that the RM is responsible for generating the koha-tmpl/intranet-tmpl/prog/css/staff-global.css later?
(In reply to David Cook from comment #11) > I take it that the RM is responsible for generating the > koha-tmpl/intranet-tmpl/prog/css/staff-global.css later? That is correct.
Created attachment 84465 [details] [review] Bug 21089: Overlapping elements in ordering information on acqui/supplier.pl This patch changes the HTML structure of the vendor edit page so that the markup is a little simpler. CSS is modified to match. This structure should serve as a model for other similar form structures: <fieldset class="rows"> <ol> <li> <label>General label:</label> <label class="radio"> Specific label 1 <input type="radio" /> </label> <label class="radio"> Specific label 2 <input type="radio" /> </label> </li> </ol> </fieldset> To test, apply the patch and regenerate the staff client CSS. - Go to Acquisitions -> Vendor search -> Vendor -> Edit vendor - In the "Ordering information" section, confirm that the position of radio buttons looks correct. - Confirm that radio button labels work correctly. - Confirm that the adjacent dropdown menus work well. Signed-off-by: David Cook <dcook@prosentient.com.au>
Awesome work all! Pushed to master for 19.05
Pushed to 18.11.x for 18.11.03
Merge conflict with 18.05.x. Need rebase patch to push to 18.05.x