Thanks to visit codestin.com
Credit goes to github.com

Skip to content

[web] Password manager icon overlaps the text in TextField  #81201

Open
Open
[web] Password manager icon overlaps the text in TextField #81201
Labels
P2Important issues not at the top of the work lista: text inputEntering text in a text field or keyboard related problemsf: material designflutter/packages/flutter/material repository.found in release: 2.0Found to occur in 2.0found in release: 2.3Found to occur in 2.3frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onplatform-webWeb applications specificallyteam-webOwned by Web platform teamtriaged-webTriaged by Web platform team
@pncosta

Description

@pncosta
pncosta
opened on Apr 26, 2021

Hi,

Im trying to build a login/sign up form for the Web.

Im using the autofillHints option on TextFormField to allow password managers to save and fill the textboxes

However, with 1password,, the icon to autofill gets wrongly placed on the textbox:
instead of being aligned to the right of the textbox it gets in the middle of the textbox

Steps to Reproduce

Sample code to reproduce:

MaterialApp(
          home: Scaffold(
            body: Container(
              color: Colors.orangeAccent,
              width: 500,
              child: Padding(
                padding: const EdgeInsets.all(15.0),
                child: Column(
                  children: [
                    Text('Email'),
                    TextFormField(
                      autofillHints: [AutofillHints.email],
                    ),
                    Text('Password'),
                    TextFormField(
                      autofillHints: [AutofillHints.password],
                    ),
                  ],
                ),
              ),),
           )...

Expected results:
Expeted the password manager icon to be placed on the right of the text field

Actual results:

password manager icon is placed in the middle of the textbox as shown here:

image image

Details 
[✓] Flutter (Channel stable, 2.0.4, on macOS 11.2.3 20D91 darwin-x64, locale en-GB)
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
[!] Xcode - develop for iOS and macOS
    ✗ CocoaPods installed but not working.
        You appear to have CocoaPods installed but it is not working.
        This can happen if the version of Ruby that CocoaPods was installed with is different from the one
        being used to invoke it.
        This can usually be fixed by re-installing CocoaPods.
      To re-install see https://guides.cocoapods.org/using/getting-started.html#installation for
      instructions.
[✓] Chrome - develop for the web
[✓] Android Studio (version 3.5)
[✓] IntelliJ IDEA Community Edition (version 2020.3.2)
[✓] VS Code (version 1.55.2)
[✓] Connected device (1 available)

Is there any way to force the icon to align on the right?

Metadata

Metadata

Assignees

No one assigned

    Labels

    P2Important issues not at the top of the work lista: text inputEntering text in a text field or keyboard related problemsf: material designflutter/packages/flutter/material repository.found in release: 2.0Found to occur in 2.0found in release: 2.3Found to occur in 2.3frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onplatform-webWeb applications specificallyteam-webOwned by Web platform teamtriaged-webTriaged by Web platform team

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions