Optimize Seven's select boxes for small screens

Applying patch for the default country select box issue.

I tested the patches and they seem to be causing some unintended changes. The #5 patch is effecting all the select elements, also its targeting the select element instead of using a class .form-select. On the node creation page the select element for Text Format is getting stretched to 100% width which isn't looking neat or matching the styleguide.

I noticed inconsistency of the select element on the Installation page, this is stylistic change which I'd leave for others to discussion on.

I've added a patch targeting the overflow of select box on mobile devices.

@skippednote Have you test #1 patch, I think this patch is just for Installation screen and not effecting other select boxes.

I have tested the patch #1 on my local machine.
Its working fine for configuration page and not effect any othe select list.

@deepak It would be good if you can attach some screenshots from mobile as well. Because issue was on mobile.

I have tested also on mobile and its working fine.

Re-rolled patch for commit 7f1b02ecd93c08e82a4020b8cec500fde718594e.

This patch is looking food but I wanted to point out that I think the select fields should look consistent - the timezone field not doesn't match the country field and I think they should both be

width: 100%;
max-width: 100%;

so that they both look and act the same across different breakpoints.

Added a screenshot of the two fields at different widths.

I'm about to look at this issue at DrupalCon LA

I added a width and max-width 100% (per @meeli's suggestion) to the existing media query in form.css for "narrow devices". This should extend the select box fields the width of the device for handheld.

Adding a screenshot to comment #19

+++ b/core/themes/seven/css/components/form.css
@@ -303,6 +300,10 @@ select {
+  #edit-site-default-country, #edit-date-default-timezone {
+    width: 100%;
+    max-width: 100%;
+  }

Can we not use ID's to select individual elements? We should try and avoid overriding elements in one situation. Is it possible to apply this CSS to all select boxes? I think that would be ok behaviour.

adding .form-selectinstead of #edit-site-default-country, #edit-date-default-timezone

But @lewis, May be it causes a problem for other forms also.. we have to check that manually :)

I made 4 screens for two custom width (360 and 570 pixels)

I tested this patch on a few other pages and it doesn't have any bad effects, it simply makes the select element full width. This is overidden correctly on pages that float or set widths on their form items as the select element only fills the maximum width of the .form-item wrapper div.

One question:

+++ b/core/themes/seven/css/components/form.css
@@ -196,11 +196,8 @@ textarea.form-textarea {
- * Limits extra long instances of select elements to the max width allowed
- * to avoid breaking layouts.
- */
-select {
+
+.form-select {
   max-width: 100%;
 }

I'm not sure why we are removing this comment?

Reverting comment for

.form-select

and applying width value

max-width: 100%;

.

Reverting comment for

.form-select

and applying width value

max-width: 100%;

.

I have checked it on emulators and working fine for me. Please check the screenshot.

After applying patch:

Hi I've applied the patch from 32 on my local and rerun all tests and they are passing without problems,

The patch in #32 has 9 fails, so should not be RTBC. Looks like unrelated changes that could be removed.

The patch in #39 is a different solution to the work in the patch at #32 which was RTBC.

The patch in #32 contained unrelated changes for this issue, there should only be changes to the form.css file.

Please can someone take the patch in #32 remove the unrelated changes and upload a new patch please?

Thanks :)

Adding patch with the fix for mobile viewport.

I'm working on this in the Mentor Sprints at DrupalCon NOLA 2016.

Confirmed against Drupal 8.2.x-dev.

I am working on this at Core sprint at DrupalCon New Orleans

Confirmed that this addresses the issues raised by emma.maria and only has changes to the form.css file.

I have reviewed #41. It applies cleanly to brach 8.2.x I can verify that it fixes the issue with width of select boxes in mobile view.
And also additional unrelated changes in #32 have been removed. I believe this is RTBC

RTBC +1. Reviewed and tested locally and ran dreditor to confirm that the fix works and conforms to changes only in form.css file.

+++ b/core/themes/seven/css/components/form.css
@@ -207,7 +207,7 @@ textarea.form-textarea {
-select {
+.form-select {

@@ -310,6 +310,9 @@ select {
+  .form-select {
+    width: 100%;
+  }

I might be missing something but I'm not sure why are we changing the first selector here and why the second selector is .form-select instead of select. I don't see it being discussed here so I am asking :)

@Cottser Don't know the answer but we can take anything .form-select or select because both are pointing to the same element. If you want, I can change the selector.

I have captured a screenshot for reference to others.

This is working fine after applying patch #41.
Screenshot is attached for your reference.

I think in that case we should use select as the (base of the) selector then.

Thanks for the manual testing @Maninders but we were just discussing whether it's the right solution a few comments ago.

I think we have to keep select rather than .form-select

Updating the patch with adding style using html selector instead of the class.

Verified the patch 'select-box-issue-in-configuration-page-on-mobile-2392729-59.patch' and the size of 'Default time zone' is now 100%.
Attaching snapshots for reference.

Looks good to me, Thanks.

A UI bugfix like this should be eligible during the 8.2.x beta. After that it can still go into 8.3.x.

Assigning for review.

Unrelated test failure.

Committed and pushed b184ba6 to 8.3.x and 4ab99e3 to 8.2.x. Thanks!