CODEWITHSUNDEEP
maui
pr0skilled
pr0skilled

Reputation: 13

How to fix the absence of scrolling in Editor inside of ScrollView in MAUI?

Editor placed inside StackLayout that is inside ScrollView is not scrolling in Android. (can't check iOS)

Tried setting scrollview ScrollOrientation to Neither but it didn't help.

Here is the sample code:

public class TestingPage : ContentPage
    {
        public TestingPage()
        {
            var box = new BoxView
            {
                HeightRequest = 80,
                BackgroundColor = Colors.Gray
            };
            var editor = new Editor
            {
                Text = "defaul \n qweqweqweq \n 123123 \n 123123\n 123123\n 123123\n 123123\n 123123\n 123123\n 123123\n 123123\n 123123",
                TextColor = Colors.Red,
                HeightRequest = 80,
            };
            var box2 = new BoxView
            {
                HeightRequest = 80,
                BackgroundColor = Colors.Gray
            };

            var stack = new StackLayout
            {
                Children =
                {
                    box, editor, box2
                }
            };

            var scroll = new ScrollView
            {
                Content = stack,
                Orientation = ScrollOrientation.Vertical,
            };

            Content = scroll;
        }
    }

Does anyone has workarounds or maybe I'm doing something wrong, because it looks like a thing that must work.

P.S. The problem is that text editor is not scrolling. Editor's height is 80 and there are >10 lines of text so you can't see all lines. And also you can't scroll those lines. I want to be able to scroll text inside TextEditor.

Here is the video. Right emulator is the code from above. Left one is the same code but Content = stack; and editor scrolls there.

Upvotes: 1

Views: 1863

Answers (3)

Guangyu Bai - MSFT
Guangyu Bai - MSFT

Reputation: 4586

Editor placed inside StackLayout that is inside ScrollView is not scrolling in Android.

Your code is right. It did not work because the elements you write do not have enough height to fill the ScrollView.

You can try to set the height higher like the code below and the ScrollView will work well.

var box = new BoxView {
  HeightRequest = 800,
  BackgroundColor = Colors.Gray
};

var editor = new Editor {
  Text = "defaul \n qweqweqweq \n 123123 \n 123123\n 123123\n 123123\n 123123\n 123123\n 123123\n 123123\n 123123\n 123123",
  TextColor = Colors.Red,
  HeightRequest = 800,
};

var box2 = new BoxView {
  HeightRequest = 800,
  BackgroundColor = Colors.Gray
};

Upvotes: 1

Paul G
Paul G

Reputation: 366

ScrollView is throwing you off here. Its irrelevant to make an Editor scrollable. ScrollView is more for long paragraphs of text, not a container for other layouts.

For example these both allow scrolling in the editor:

var editor = new Editor
{
    Text = "defaul \n qweqweqweq \n 123123 \n 123123\n 123123\n 123123\n 123123\n 123123\n 123123\n 123123\n 123123\n 123123",
    TextColor = Colors.Red,
    HeightRequest = 80,
};

// Will scroll
Content = editor;

// Another option
Content = new StackLayout { Children = { editor } };

(Btw MAUI has an issue with Editors not scrolling on iOS but this should fix your Android issue. Still waiting on a fix in .NET 7 as of Sept '23) https://github.com/dotnet/maui/issues/12485

Upvotes: 0

osama alqaisi
osama alqaisi

Reputation: 1

Add this code inside the scroll

VerticalOptions = LayoutOptions.FillAndExpand

Upvotes: -1

Related Questions