Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

text selection toolbar over flow ! #35826

Open
MoSala7 opened this issue Jul 9, 2019 · 21 comments

Comments

@MoSala7
Copy link

commented Jul 9, 2019

A problem happens in TextFormField Widget when trying to select part of the input text the Selection toolbar show up but not normally it overflow by 3.0 pixels from the right!!!
The funny part that it left more than 3.0 pixels from the left side of screen which its not centered!!

Picture for the problem

https://ibb.co/k9Rk13M

Logs

`Container(
                                height:
                                    MediaQuery.of(context).size.height * 0.25,
                                margin: EdgeInsets.fromLTRB(marginFixed * 0.5,
                                    0.0, marginFixed * 0.5, marginFixed * 0.5),
                                child: TextField(
                                  enableInteractiveSelection: true,
                                  expands: true,
                                  controller: _noteController,
                                  style: TextStyle(
                                      color: StyleCustom.txtPrimary,
                                      fontSize: 16.0),
                                  maxLines: null,
                                  minLines: null,
                                  decoration: InputDecoration(
                                    hintStyle: TextStyle(
                                        color: StyleCustom.txtSecondry),
                                    border: InputBorder.none,
                                    hintText: 'write your note here',
                                  ),
                                  onChanged: (String value) {
                                    debugPrint(value);
                                  },
                                ),
                              ),`
`
I/flutter ( 5019): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter ( 5019): The following assertion was thrown during layout:
I/flutter ( 5019): A RenderFlex overflowed by 3.0 pixels on the right.
I/flutter ( 5019):
I/flutter ( 5019): The overflowing RenderFlex has an orientation of Axis.horizontal.
I/flutter ( 5019): The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and
I/flutter ( 5019): black striped pattern. This is usually caused by the contents being too big for the RenderFlex.
I/flutter ( 5019): Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the
I/flutter ( 5019): RenderFlex to fit within the available space instead of being sized to their natural size.
I/flutter ( 5019): This is considered an error condition because it indicates that there is content that cannot be
I/flutter ( 5019): seen. If the content is legitimately bigger than the available space, consider clipping it with a
I/flutter ( 5019): ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex,
I/flutter ( 5019): like a ListView.
I/flutter ( 5019): The specific RenderFlex in question is: RenderFlex#70842 relayoutBoundary=up4 OVERFLOWING:
I/flutter ( 5019):   creator: Row ← ConstrainedBox ← Container ← DefaultTextStyle ← AnimatedDefaultTextStyle ←
I/flutter ( 5019):     _InkFeatures-[GlobalKey#e7167 ink renderer] ← NotificationListener<LayoutChangedNotification> ←
I/flutter ( 5019):     PhysicalModel ← AnimatedPhysicalModel ← Material ← _TextSelectionToolbar ← CustomSingleChildLayout
I/flutter ( 5019):     ← ⋯
I/flutter ( 5019):   parentData: <none> (can use size)
I/flutter ( 5019):   constraints: BoxConstraints(0.0<=w<=360.0, h=44.0)
I/flutter ( 5019):   size: Size(360.0, 44.0)
I/flutter ( 5019):   direction: horizontal
I/flutter ( 5019):   mainAxisAlignment: start
I/flutter ( 5019):   mainAxisSize: min
I/flutter ( 5019):   crossAxisAlignment: center
I/flutter ( 5019):   textDirection: ltr
I/flutter ( 5019):   verticalDirection: down
I/flutter ( 5019): ◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
I/flutter ( 5019): ════════════════════════════════════════════════════════════════════════════════════════════════════`
`[√] Flutter (Channel stable, v1.7.8+hotfix.2, on Microsoft Windows [Version 10.0.17763.557], locale en-US)
    • Flutter version 1.7.8+hotfix.2 at C:\src\flutter
    • Framework revision 2e540931f7 (7 days ago), 2019-07-02 09:31:07 -0700
    • Engine revision b1cb0d9e9b
    • Dart version 2.4.0


[√] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
    • Android SDK at C:\Users\midos\AppData\Local\Android\sdk
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-28, build-tools 28.0.3
    • Java binary at: C:\Program Files\Java\jdk1.8.0_211\bin\java
    • Java version Java(TM) SE Runtime Environment (build 1.8.0_211-b12)
    • All Android licenses accepted.

[!] Android Studio (not installed)
    • Android Studio not found; download from https://developer.android.com/studio/index.html
      (or visit https://flutter.dev/setup/#android-setup for detailed instructions).

[√] IntelliJ IDEA Community Edition (version 2019.1)
    • IntelliJ at C:\Program Files\JetBrains\IntelliJ IDEA Community Edition 2019.1.3
    • Flutter plugin version 36.0.4
    • Dart plugin version 191.7479.14

[√] VS Code, 64-bit edition (version 1.36.0)
    • VS Code at C:\Program Files\Microsoft VS Code
    • Flutter extension version 3.2.0

[√] Connected device (1 available)
    • COR L29 • XTX7N18A31001552 • android-arm64 • Android 8.1.0 (API 27)

! Doctor found issues in 1 category.`
@justinmc

This comment has been minimized.

Copy link
Contributor

commented Jul 10, 2019

Thanks for the issue @MoSala7. Can you post the code that reproduces the overflow?

@MoSala7

This comment has been minimized.

Copy link
Author

commented Jul 10, 2019

Thanks for the issue @MoSala7. Can you post the code that reproduces the overflow?

Thanks for notifying me, code updated in the issue.

@westracer

This comment has been minimized.

Copy link

commented Jul 11, 2019

I am experiencing the same problem. Material toolbar overflows almost every time when using russian localization (because words are quite long). Wrapping _TextSelectionToolbar in SingleChildScrollView with horizontal scroll axis could help (/material/text_selection.dart:176).

@justinmc

This comment has been minimized.

Copy link
Contributor

commented Jul 11, 2019

@westracer Does this happen on native Android as well with a Russian locale? Does native handle it by scrolling the menu horizontally?

It seems like we should definitely handle the possibility of the selection menu being wider than the screen. I don't see this happening on a simulated Pixel 2, but I imagine it could be common on narrower phones and other locales.

@westracer

This comment has been minimized.

Copy link

commented Jul 12, 2019

@justinmc Yes, it happens. I've seen multiple ways to handle overflow on native Android. For example, rendering "more" button that shows overflowed buttons in a dropdown list ( https://i.imgur.com/Up9iMZj.png https://i.imgur.com/p6tjkjB.png ), making whole toolbar scrollable or just clipping text and removing padding for every toolbar button.

In native iOS, to see overflowed buttons you need to press "right arrow" and it will show you next set of buttons (https://i.imgur.com/D6Ac1KG.png).

@justinmc

This comment has been minimized.

Copy link
Contributor

commented Jul 16, 2019

@westracer Thanks for the screenshots. We should probably support both of these. I see the "more" button solution in the native Google Keep app on Android, so that should probably be our Android solution, along with the right arrow on iOS.

This will be even more important if we support custom items in the selection menu.

@MCOfficer

This comment has been minimized.

Copy link

commented Jul 19, 2019

that looks a lot like #36005

@justinmc

This comment has been minimized.

Copy link
Contributor

commented Jul 19, 2019

Thanks for finding the duplicate. I'll close that one to focus the discussion here.

@CloudyPadmal

This comment has been minimized.

Copy link

commented Jul 27, 2019

When the screen is wide enough to fit the whole menu, this issue doesn't occur. I'm also having this issue where it doesn't happen in emulator when the screen is wide but in my real device where the screen width is smaller. Anyone have a workaround? :)

@Nico04

This comment has been minimized.

Copy link

commented Jul 27, 2019

Personally I had to change the App Button Theme's minWidth as a workaround

@henriquearthur

This comment has been minimized.

Copy link

commented Jul 28, 2019

Is it possible to change the toolbar font size as workaround until this is fixed?

@Nico04

This comment has been minimized.

Copy link

commented Jul 28, 2019

@henriquearthur you can try by modifying the ThemeData of the buttonTheme property of the App main theme

@adarshgurjar

This comment has been minimized.

Copy link

commented Aug 2, 2019

@justinmc , When we can expect the issue fixed officially ? The only workaround seems to be changing minWidth in ThemeData as suggested by @Nico04 . Also does the toolbar depends upon display resolution of the device ? Its not an issue on some mid range devices, but it is for some devices like Redmi 4

@justinmc

This comment has been minimized.

Copy link
Contributor

commented Aug 2, 2019

As a quick and dirty workaround using horizontal scrolling, you could replace this line:

child: Row(mainAxisSize: MainAxisSize.min, children: items),

With this:

        child: ListView(
          scrollDirection: Axis.horizontal,
          children: items,
        ),
@justinmc

This comment has been minimized.

Copy link
Contributor

commented Aug 2, 2019

Long term we'll need to implement the native solution on Android and iOS. Here is what it looks like on Android:

@daka-kolp

This comment has been minimized.

Copy link

commented Aug 14, 2019

The problem with _TextSelectionToolbar in sourse file flutter/packages/flutter/lib/src/material/text_selection.dart. I don't know how it works with cupertino.
But simple solution that I use:
rows 57-63 in text_selection.dart:

return Material(
elevation: 1.0,
child: Container(
height: _kToolbarHeight,
child: FittedBox(
child: Row(mainAxisSize: MainAxisSize.min, children: items)),
),
);

I don't think it is right, because the TextField can have more than 4 options + different localization.

@imlegend19 imlegend19 referenced a pull request that will close this issue Aug 14, 2019
7 of 9 tasks complete
@jaumard

This comment has been minimized.

Copy link

commented Aug 15, 2019

same here (in Spanish)
Screenshot_20190815-043348

@deisold

This comment has been minimized.

Copy link

commented Aug 22, 2019

Are there any news on the topic? I'm having this problem as well.

@justinmc

This comment has been minimized.

Copy link
Contributor

commented Aug 22, 2019

There is a PR open with a temporary solution, it's just missing a bugfix and some tests: #38561

@deisold

This comment has been minimized.

Copy link

commented Aug 22, 2019

@justinmc in what branch will it be available then? dev? or something more stable?

@justinmc

This comment has been minimized.

Copy link
Contributor

commented Aug 22, 2019

If/when that PR is merged, it will immediately end up in master. Then it will follow the usual process of being propagated out to our other channels over time.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
You can’t perform that action at this time.