Textfield content disapears when text is too long

http://pub.waves.pw/ms/textfield.mp4

[✓] Flutter (Channel stable, v1.12.13+hotfix.8, on Linux, locale en_US.UTF-8)
• Flutter version 1.12.13+hotfix.8 at /home/renan/code/flutter
• Framework revision 0b8abb4 (11 days ago), 2020-02-11 11:44:36 -0800
• Engine revision e1e6ced
• Dart version 2.7.0

[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
• Android SDK at /home/renan/Android/Sdk
• Android NDK location not configured (optional; useful for native profiling support)
• Platform android-29, build-tools 29.0.3
• Java binary at: /home/renan/code/android-studio/jre/bin/java
• Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b49-5587405)
• All Android licenses accepted.

[✓] Android Studio (version 3.5)
• Android Studio at /home/renan/code/android-studio
• Flutter plugin version 43.0.1
• Dart plugin version 191.8593
• Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b49-5587405)

[✓] VS Code (version 1.42.1)
• VS Code at /usr/share/code
• Flutter extension version 3.8.1

[✓] Connected device (1 available)
• Pixel 3a • 9BCAY1J68Q • android-arm64 • Android 10 (API 29)

• No issues found!

constrained one line TexField() using

Container(height:34,child:TextField(..))

with fontSize:16

@justinmc

@justinmc the behavior in this case changed with 6d8f539. Is this working as intended?

I was using material TextField, I switched to Cupertino one, and it works.
But I think 6d8f539 will not fix material TextField

This is not intended behavior. I'll mark it as a regression.

I was able to reproduce it with the following code (though it looks cut off instead of totally disappearing):

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        textSelectionHandleColor: Colors.greenAccent,
      ),
      home: Scaffold(
        body: Center(
          child: Container(
            height: 34,
            child: TextField(
              maxLines: 1,
            ),
          ),
        ),
      ),
    );
  }
}

I found that it is a height problem. If you set the height to 42, you will not have this problem. How to set the height of the textField?

@Piinks

~~This appears to be fixed in the latest master thanks to @Piinks and #55408 🎉~~

~~Let me know if anyone can still see this on master.~~

I was too quick in my testing, looks like it still happens on my Pixel 2.

I use the stable branch and look forward to pushing it to the stable branch

Here's a workaround that seems to fix it for me: use isDense.

          Container(
            height: 34,
            child: TextField(
              maxLines: 1,
              decoration: InputDecoration(
                isDense: true,
              ),
            ),
          ),

I spent some time looking into this and couldn't get a fix yet, but I do see that it's affected by the padding used in InputDecorator's _layout.

@gnprice

Thanks for your insights @gnprice .

To make the field shorter without causing this problem, instead of setting a short height, you should adjust the InputDecoration by setting isDense, or contentPadding, or both.

This issue also occurs without setting a height. Just setting the border to OutlineInputBorder also causes the issue:

InputDecoration(
  border: const OutlineInputBorder(),
  enabledBorder: OutlineInputBorder(
      borderSide: BorderSide(color: Colors.red),
   ),
),

@LongCatIsLooong

This issue is assigned to @LongCatIsLooong but has had no recent status updates. Please consider unassigning this issue if it is not going to be addressed in the near future. This allows people to have a clearer picture of what work is actually planned. Thanks!

@LongCatIsLooong

This issue was assigned to @LongCatIsLooong but has had no status updates in a long time. To remove any ambiguity about whether the issue is being worked on, the assignee was removed.

@LongCatIsLooong

We would love to get this issue fixed but no one is currently working on it. If anyone wants to submit a PR I'd be happy to review.

From @LongCatIsLooong it might be possible to partially workaround this by manually reducing contentPadding, though that might not work if the user has increased their device's font size.

Navigation Menu

Repository navigation

Textfield content disapears when text is too long #51257

50 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Textfield content disapears when text is too long #51257

Description

Activity

renanyoy commented on Feb 22, 2020

jason-simmons commented on Feb 26, 2020

renanyoy commented on Feb 26, 2020

justinmc commented on Feb 28, 2020

JamesGZM commented on Apr 23, 2020

justinmc commented on Apr 23, 2020

JamesGZM commented on Apr 24, 2020

justinmc commented on May 1, 2020

50 remaining items

CoderUni commented on Jun 14, 2024

flutter-triage-bot commented on Oct 17, 2024

flutter-triage-bot commented on Jan 3, 2025

justinmc commented on Sep 25, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions