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

Horizontal scroll not working in CodePane #672

Open
badnikhil opened this issue Mar 17, 2025 · 10 comments · May be fixed by #787
Open

Horizontal scroll not working in CodePane #672

badnikhil opened this issue Mar 17, 2025 · 10 comments · May be fixed by #787

Comments

@badnikhil
Copy link
Contributor

badnikhil commented Mar 17, 2025

Describe the bug/problem

horizontal scroll isn't working in Code section. there is a scroll bar but it aint working
I think there is something to do with the drawer..

Steps to Reproduce the bug/problem

1.Paste any URL
2. Open the Code section
3. try scrolling horizontally

Expected behavior

It should scroll horizontally too ..

Device Info (The device where you encountered this issue)

  • OS: Android
Screencast.from.2025-03-17.23-31-20.webm
@badnikhil badnikhil added the bug Something isn't working label Mar 17, 2025
@Udhay-Adithya
Copy link
Contributor

The same happens with iOS as well. But we are able to scroll horizontally when we try to scroll using the scroll bar.

@badnikhil
Copy link
Contributor Author

badnikhil commented Mar 18, 2025

The same happens with iOS as well. But we are able to scroll horizontally when we try to scroll using the scroll bar.

maybe in iOS dragging the scroll bar works.i wasn't sure about this that's why i only wrote Android.
Also in desktop window(on linux) go to code.. the horizontal scroll only works when the vertical scroll is available .. if vertical scrollbar is inactive you cant swipe to scroll.Can't recall what this behaviour is called

@Udhay-Adithya
Copy link
Contributor

I found why this problem occurs and it is because of the drawer.

Specifically because of line 42 from this file : splitview_drawer.dart

The issue occurred because drawerEdgeDragWidth: context.width was set, causing the entire screen width to act as the drawer drag area.

This prevented horizontal scrolling from working properly.

@badnikhil
Copy link
Contributor Author

I found why this problem occurs and it is because of the drawer.

Specifically because of line 42 from this file : splitview_drawer.dart

The issue occurred because drawerEdgeDragWidth: context.width was set, causing the entire screen width to act as the drawer drag area.

This prevented horizontal scrolling from working properly.

Nice find! I knew this unexpected behaviour is caused due to drawer because when trying to drag the scrollbar the drawer was opening.. bht not why and where

@ashitaprasad
Copy link
Member

@DenserMeerkat Please review this issue and the associated PRs. Thanks

@badnikhil
Copy link
Contributor Author

badnikhil commented Mar 23, 2025

I would like to point out that when the drawerEdgeDragWidth is set to 0, everything functions as expected. I wanted to raise a PR but i thought it will be better to discuss first

@DenserMeerkat
Copy link
Contributor

Limiting the drawerEdgeDragWidth to fraction of viewport or to an absolute value is a valid solution and makes the horizontal scrollbar work. But also think about how you can solve the issue of horizontal drag scrolling not working for regions not having text. (Eg: cURL codegen)

Hint: The Column widget should be made to extend to the height of the container in CodeGenPreviewer.

SingleChildScrollView(
  ...
  child: SingleChildScrollView(
    ...
    child: Column(
        ...
      ),
  ),
)

@Udhay-Adithya
Copy link
Contributor

Hey

                  SelectionArea(
                    child: SizedBox(height: context.width,
                      child: Text.rich(
                         ..
                      ),
                    ),
                  ),

Hey @badnikhil , the SizedBox approach might work for your specific screen size and content length, but it introduces layout fragility that will break in other cases.

@Udhay-Adithya
Copy link
Contributor

Here is an example of where it breaks. I was unable to scroll below that as you can see the vertical scrollbar is not visible.

@badnikhil
Copy link
Contributor Author

badnikhil commented Mar 23, 2025

Here is an example of where it breaks. I was unable to scroll below that as you can see the vertical scrollbar is not visible.

My bad I was expecting overflows... I tested resizing on Linux actually
Truth to be told i tried so many things but couldn't find final 100% working solution

@animator animator removed the bug Something isn't working label Mar 29, 2025
@badnikhil badnikhil linked a pull request Apr 7, 2025 that will close this issue
9 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
5 participants