number input at 100% width drops suffix below on narrow screens [#1879798]

#1870944: [Meta] Mobile friendly admin pages

Problem/Motivation

Media - Image Style Edit, Add Effects - Rotate:
The Degree symbol next to the Rotation angle selection box, drops below the selection box in NARROW screens.

Admin URL: admin/config/media/image-styles/edit/%/add/image_rotate

Proposed resolution

To be determined.

Remaining tasks

To be determined.

Comment	File	Size	Author
#8	image-style.png	105.05 KB	rteijeiro
#7	form-elements-narrow-width-1879798-7.patch	385 bytes	echoz
#7
#4	form-elements-narrow-width-1879798-4.patch	643 bytes	echoz
#4
#1	input-form-number.png	58.28 KB	echoz
#5	form-number1_before.png	18.12 KB	echoz
#5	form-number1_after.png	17.79 KB	echoz
#5	form-number2_before.png	6.77 KB	echoz
#5	form-number2_after.png	6.58 KB	echoz
#5	form-select_before.png	15.83 KB	echoz
#5	form-select_after.png	15.73 KB	echoz
	media-addeffect-rotate.png	402.23 KB	Shyamala

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

echoz CreditAttribution: echoz commented 4 January 2013 at 23:48

Status:

Needs review

» Active

File	Size
input-form-number.png	58.28 KB

Proposed resolution, add:

input.form-number {
  width: auto;
}

after existing css where this + other inputs are 100% for narrow viewports.
Are there any other input types that have characters to their right like this?

Comment #2

Shyamala CreditAttribution: Shyamala commented 4 January 2013 at 18:25

The admin/config/media/image-toolkit page has a percentage symbol which is best fixed.

More media style pages have pixels next to the select list which doesn't look odd in the second line.

Comment #3

andypost

he/him

Russian

CreditAttribution: andypost commented 4 January 2013 at 22:36

PHP imagerotate has 3rd parameter about transparency, suppose we should discuss a default value

Comment #4

echoz CreditAttribution: echoz commented 4 January 2013 at 23:49

Status:

Active

» Needs review

File	Size
form-elements-narrow-width-1879798-4.patch	643 bytes

@Shyamala, these 2 examples in #2 are also .form-number and covered in this patch.
I also included .form-select as another form element that often has something on the right so is problematic at 100% width.
Also corrected previous indenting.

I'll follow with screenshots.

@andypost, not what this issue is about, you could open another issue.

Comment #5

echoz CreditAttribution: echoz commented 4 January 2013 at 23:46

Status:

Active

» Needs review

File	Size
form-select_after.png	15.73 KB
form-select_before.png	15.83 KB
form-number2_after.png	6.58 KB
form-number2_before.png	6.77 KB
form-number1_after.png	17.79 KB
form-number1_before.png	18.12 KB

Screenshots showing .form-number and .form-select changes in #4 patch.

Comment #6

echoz CreditAttribution: echoz commented 5 January 2013 at 03:46

Title:

Media - Image Style Edit - Add Rotate Effect

» number inputs at 100% drop suffix below on narrow screens

Comment #7

echoz CreditAttribution: echoz commented 14 January 2013 at 21:22

Title:

number inputs at 100% drop suffix below on narrow screens

» number input at 100% width drops suffix below on narrow screens

File	Size
form-elements-narrow-width-1879798-7.patch	385 bytes

Rerolling to only address .form-number, following patching guidelines for single change request.
Plus clearer issue title. Sorry for the noise.

Comment #8

rteijeiro CreditAttribution: rteijeiro commented 18 January 2013 at 17:48

Status:

Needs review

» Needs work

File	Size
image-style.png	105.05 KB

Hi echoz.

I am still getting the same issue with the "Add" button as shown in the attached image.

Tested with Chrome, Firefox, Opera and Safari. Also with my iPhone :)

Comment #9

echoz CreditAttribution: echoz commented 18 January 2013 at 21:26

Status:

Needs work

» Needs review

#rteijeiro thanks for reviewing!
#8 is not what this patch is about. See the 1st 4 screenshots in #5, the "form-number" before and after (forget the form-select one, the last patch only is for form-number).

Comment #10

rteijeiro CreditAttribution: rteijeiro commented 23 January 2013 at 19:07

Status:

Needs review

» Needs work

Thanks echoz and sorry for the mistake :)

Have applied the #4 patch and I can see the following error in Safari, Firefox and iPhone:

http://drupal.org/files/form-select_before.png

The other issues are correct in Chrome, Firefox, Safari, Opera and iPhone.

Hope it helps.

Comment #11

echoz CreditAttribution: echoz commented 23 January 2013 at 21:29

Status:

Needs work

» Needs review

#10 this patch is not for select form elements. It is only for form-number dropping the suffix below on narrow screens. Again, see the 1st 4 screenshots in #5, the "form-number" before and after (forget the form-select one, the last patch only is for form-number).