Project

General

Profile

Actions

Feature #77069

closed

Input fields "jump" when focusing or blurring input fields

Added by Robert Vock over 8 years ago. Updated about 6 years ago.

Status:
Closed
Priority:
Should have
Category:
Backend User Interface
Target version:
-
Start date:
2016-07-12
Due date:
% Done:

100%

Estimated time:
PHP Version:
7.0
Tags:
JavaScript
Complexity:
Sprint Focus:
On Location Sprint

Description

When focusing an input field in the backend, an info appears how many chars are allowed. This info will disappear when the field loses focus. This results in "jumping" of the following fields, which makes it harder to click on the correct field. See screencast for example.

Google has a nice solution in material design:
https://material.google.com/components/text-fields.html#text-fields-required-fields

The space for the help or error text is reserved. The fields always stay at the same position


Files

Jumping-Input-Fields.mov (196 KB) Jumping-Input-Fields.mov Robert Vock, 2016-07-12 17:56

Related issues 2 (0 open2 closed)

Related to TYPO3 Core - Bug #78863: UX issue with the remaining chars labelClosed2016-12-02

Actions
Related to TYPO3 Core - Bug #81447: Avoid jumping of form fields when focusingClosed2017-06-03

Actions
Actions #1

Updated by Riccardo De Contardi almost 8 years ago

The issue should also be present on 7.6.x

I report the text and additional info from #78863:

If a user clicks on a field (Title for example), the label "Remaining characters" appears and it moves down everything that is below it. If the user then clicks on one of the fiels below (RTE for example), everything moves back up and the click is not registered.

It depends on the browser, with Chrome it's as I described it, however Firefox kind of registers the click.

Actions #2

Updated by Benjamin Kott over 7 years ago

  • Status changed from New to Accepted
  • Priority changed from Could have to Should have
  • Sprint Focus set to On Location Sprint
Actions #3

Updated by Oliver Hader over 7 years ago

  • Tags set to JavaScript
Actions #4

Updated by Jasmina Ließmann over 7 years ago

  • Assignee set to Jasmina Ließmann
Actions #5

Updated by Gerrit Code Review over 7 years ago

  • Status changed from Accepted to Under Review

Patch set 1 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/52997

Actions #6

Updated by Gerrit Code Review over 7 years ago

Patch set 2 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/52997

Actions #7

Updated by Jasmina Ließmann over 7 years ago

  • Status changed from Under Review to Resolved
  • % Done changed from 0 to 100
Actions #8

Updated by Gerrit Code Review over 7 years ago

  • Status changed from Resolved to Under Review

Patch set 1 for branch TYPO3_8-7 of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/53006

Actions #9

Updated by Gerrit Code Review over 7 years ago

Patch set 2 for branch TYPO3_8-7 of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/53006

Actions #10

Updated by Gerrit Code Review over 7 years ago

Patch set 1 for branch TYPO3_8-7 of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/53020

Actions #11

Updated by Jasmina Ließmann over 7 years ago

  • Status changed from Under Review to Resolved
Actions #12

Updated by Jasmina Ließmann over 7 years ago

  • Related to Bug #81447: Avoid jumping of form fields when focusing added
Actions #13

Updated by Benni Mack about 6 years ago

  • Status changed from Resolved to Closed
Actions

Also available in: Atom PDF