Closed Bug 620150 Opened 14 years ago Closed 14 years ago

When jumping to invalid input leave some space above the input

Categories

(Firefox :: General, defect)

defect
Not set
normal

Tracking

()

RESOLVED INVALID

People

(Reporter: jk1700, Unassigned)

Details

Attachments

(1 file)

User-Agent:       Mozilla/5.0 (Windows NT 6.1; WOW64; rv:2.0b9pre) Gecko/20101218 Firefox/4.0b9pre
Build Identifier: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:2.0b9pre) Gecko/20101218 Firefox/4.0b9pre

When submitting invalid form page jumps to the first invalid input so that it is on the top of the window. However often there is label above the input or application menu with position:fixed and user may be confused what happened.
There should be some space left above the invalid input regardless the page behaviour (jumping or scrolling (bug 600154) to the invalid input)

Reproducible: Always

Steps to Reproduce:
Open the URL, scroll down to find the submit button and click it
Requesting blocking2.0 as it looks like quite serious usability issue
Blocks: 600154
blocking2.0: --- → ?
Version: unspecified → Trunk
Could you please read the bug writing guidelines 
at https://developer.mozilla.org/en/Bug_writing_guidelines to see the 
kinds of information needed in a bug report. Please report back with more details (like BuildID and steps to reproduce) after reading that page. 

If you're actually looking for support, the best place to go is: http://support.mozilla.com/

Thanks!
Whoops sorry, wrong bug.

However, not quite sure I follow the steps to reproduce? 
Could you elaborate slightly - thanks!
OK, here we go with detailed STR:

1. open the URL
2. scroll the page down and find the submit button (and make sure that the text input is now not visible on the screen)
3. press submit button

Actual results:
Page jumps to the first invalid field, so that it is displayed on the top of the window. However it is covered by the menu (grey bar) with position:fixed, and the label which is above the input field is not visible

Expected results:
Page should jump to position which will make the input and the label visible - it could be for example 3-4em above the input (1em = input font size)

Now the page jumps, but after the bug 600154 is fixed the page will scroll to the input. "Expected results" applie to both cases (jumping/scrolling)
Attached image screenshot
You should not open a bug about a feature that is not even reviewed. In that case, adding a comment to bug 600154 and opening a follow-up if not done when landed would have been the correct process.

However, in the patch in bug 600154, I'm leaving 100px on each side of the focused element if possible. When .labels property will be implemented, making sure all labels are visible might be a good idea.
No longer blocks: 600154
Status: UNCONFIRMED → RESOLVED
blocking2.0: ? → ---
Closed: 14 years ago
Resolution: --- → INVALID
Sorry for involving bug 600154 into this bug. 
However, as you can see in the testcase, this will not only happen after landing bug 600154, it happens also in the current build. That's why I don't agree that this bug is invalid. 
I've created a separated bug so that it could be fixed before 600154 (which seems to be not fixed in 2.0)
(In reply to comment #7)
> Sorry for involving bug 600154 into this bug. 
> However, as you can see in the testcase, this will not only happen after
> landing bug 600154, it happens also in the current build. That's why I don't
> agree that this bug is invalid.

Hmm, unfortunately we can't fix that now. It will be fixed by bug 600154 or later but not for 2.0.

> I've created a separated bug so that it could be fixed before 600154 (which
> seems to be not fixed in 2.0)

Bug number?
Bug 620150 ;) This is the "separate bug" I was talking about. Initially I thought it could be fixed with bug 600154, but then I noticed that it's not going to be fixed in 2.0, so I created this bug hoping that it will be fixed in 2.0
I understand that labels are not ready yet, I thought that at least it's easy to implement the version which jumps 100px above the input. Without this fix form validation has imho quite serious usability issue
(In reply to comment #9)
> Bug 620150 ;) This is the "separate bug" I was talking about.

Oups, sorry :)

> Initially I
> thought it could be fixed with bug 600154, but then I noticed that it's not
> going to be fixed in 2.0, so I created this bug hoping that it will be fixed in
> 2.0
> I understand that labels are not ready yet, I thought that at least it's easy
> to implement the version which jumps 100px above the input. Without this fix
> form validation has imho quite serious usability issue

Unfortunately, adding 100px above the invalid element wouldn't be much easier than fixing bug 600154. We are currently only calling .focus() on the invalid element.
I really think we should fix that with bug 600154 after Firefox 4.
Why not just add

aFormElement.ownerDocument.defaultView.scrollBy(0, -100);

right after element.focus()? I've hacked my firefox for the first time :) and it seems that this line solves the problem and I don't think it can cause any new problem. If the window height is < 100 then scroll by -Math.min(100, window_height-input_height_with_paddings). Let's skip the case when window height is less the input height... 

OK, that's my last attempt to convince you ;)
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: