Forum Xamarin.Forms
We are excited to announce that the Xamarin Forums are moving to the new Microsoft Q&A experience. Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

We encourage you to head over to Microsoft Q&A for .NET for posting new questions and get involved today.

Editor inside Scrollview not scrolling.

I have an editor control inside a StackLayout which is inside a ScrollView. I can scroll all the controls but when I go into an editor control if the text superpasses the editor's height I cannot scroll into the previously added text. So if the line goes out of the visible part of the editor I cannot go back to it, the only way is to erase the whole text and write something up again. So basically trying to scroll inside the editor results in scrolling out the controls inside the scrollview but I just want to scroll inside the editor. By the way editors are added to the stacklayout dynamically.

<ScrollView>
                <StackLayout x:Name="content" Orientation="Vertical"></StackLayout>
            </ScrollView>

Any suggestions?

Thank you.

Answers

  • MarcoMacedoMarcoMacedo BRMember ✭✭

    DId you found any solution?

  • KaranPatelKaranPatel USMember ✭✭

    Hi found any solution to this problem

  • KaranPatelKaranPatel USMember ✭✭

    Hi found any solution to this problem

  • RobinHosRobinHos NLMember

    Thanks @DurgaPrasadMailapalli this worked for me.

  • Oliv3rOliv3r USMember ✭✭

    @DurgaPrasadMailapalli @RobinHos Where do you put the droidListener? And do you have a similar solution to iOS?

  • DurgaPrasadMailapalliDurgaPrasadMailapalli BYUniversity ✭✭

    Hi,
    1. Where do you put the droidListener?
    You can put anywhere in the hierarchy of android solution, and call from custom renderer by this following code nativeEditText.SetOnTouchListener(new DroidTouchListener());

    1. do you have a similar solution to iOS?
      not required for iOS it will scroll individually.
  • dpedrinhadpedrinha DEMember ✭✭✭

    @DurgaPrasadMailapalli that worked great! Thsnk you.

    So sad that Xamarin forms miss such basic behaviors.

  • dheerajkdheerajk INMember

    Hi
    I have a listview and i am using Editor as a cell after entering text 5-6 line text if i am trying to scroll text so list is scrolling instead of scrolling editor text so i tried this solution but its not working for me.

    I have Created class DroidTouchListener

    public class DroidTouchListener : Java.Lang.Object, IOnTouchListener
        {
            public bool OnTouch(View v, MotionEvent e)
            {
                v.Parent?.RequestDisallowInterceptTouchEvent(true);
                if ((e.Action & MotionEventActions.Up) != 0 && (e.ActionMasked & MotionEventActions.Up) != 0)
                {
                    v.Parent?.RequestDisallowInterceptTouchEvent(false);
                }
                return false;
            }
        }
    

    and calling from EditorRenderer Rendere class but its not getting call
    nativeEditText.SetOnTouchListener(new DroidTouchListener());

    OnTouch method is not getting call?

  • tualatintualatin Member ✭✭

    Works like a charm! Thank you.

  • shalinasangashalinasanga USMember ✭✭

    @dheerajk said:
    Hi
    I have a listview and i am using Editor as a cell after entering text 5-6 line text if i am trying to scroll text so list is scrolling instead of scrolling editor text so i tried this solution but its not working for me.

    I have Created class DroidTouchListener

    public class DroidTouchListener : Java.Lang.Object, IOnTouchListener
        {
            public bool OnTouch(View v, MotionEvent e)
            {
                v.Parent?.RequestDisallowInterceptTouchEvent(true);
                if ((e.Action & MotionEventActions.Up) != 0 && (e.ActionMasked & MotionEventActions.Up) != 0)
                {
                    v.Parent?.RequestDisallowInterceptTouchEvent(false);
                }
                return false;
            }
        }
    

    and calling from EditorRenderer Rendere class but its not getting call
    nativeEditText.SetOnTouchListener(new DroidTouchListener());

    OnTouch method is not getting call?

    Did you Export your renderer ?
    [assembly: ExportRenderer(typeof(Editor), typeof(CustomEditorRenderer))]
    search - register custom renderer xamarin in google

  • CharwakaCharwaka INMember ✭✭✭✭✭

    @DurgaPrasadMailapalli said:
    Hi,
    I found solution for this problem, it is working for me.

    1. Write a listener
        public class DroidTouchListener : Java.Lang.Object, View.IOnTouchListener
          {
              public bool OnTouch(View v, MotionEvent e)
              {
                  v.Parent?.RequestDisallowInterceptTouchEvent(true);
                  if ((e.Action & MotionEventActions.Up) != 0 && (e.ActionMasked & MotionEventActions.Up) != 0)
                  {
                      v.Parent?.RequestDisallowInterceptTouchEvent(false);
                  }
                  return false;
              }
          }
    
    
    

    2. Write custom renderer

        public class CustomEditorRenderer : EditorRenderer
          {
              protected override void OnElementChanged(ElementChangedEventArgs<Editor> e)
              {
                  base.OnElementChanged(e);
                  if (e.OldElement == null)
                  {
                      var nativeEditText = (global::Android.Widget.EditText)Control;
        
                      //While scrolling inside Editor stop scrolling parent view.
                      nativeEditText.OverScrollMode = OverScrollMode.Always;
                      nativeEditText.ScrollBarStyle = ScrollbarStyles.InsideInset;
                      nativeEditText.SetOnTouchListener(new DroidTouchListener());
        
                      //For Scrolling in Editor innner area
                      Control.VerticalScrollBarEnabled = true;
                      Control.MovementMethod = ScrollingMovementMethod.Instance;
                      Control.ScrollBarStyle = Android.Views.ScrollbarStyles.InsideInset;
                      //Force scrollbars to be displayed
                      Android.Content.Res.TypedArray a = Control.Context.Theme.ObtainStyledAttributes(new int[0]);
                      InitializeScrollbars(a);
                      a.Recycle();
                  }
              }
          }
    

    Do you have solution same for IOS ?

  • GauravKatdareGauravKatdare USMember ✭✭
    edited March 2019

    Hi @DurgaPrasadMailapalli ,

    Do you have solution for iOS? for my solution it isnot scrolling automatically.
    I have tried several thigs like adding gesturerecognizer in renderer, but it is not working properly.

    Thanks.

  • The issue on iOS is when the software keyboard is used, the page scrolls and when the user starts typing, they do not initially see the text they are typing on the keyboard without manual scrolling. This occurs because the scrollview is trying to accommodate for the on screen keyboard in iOS.

    The solution I found (although perhaps not the best) is to add a Focused event (or focused command if you're using a viewmodel) to your editor then use the ScrollTo method on your scrollview.

    private void NotesEditor_Focused(object sender, FocusEventArgs e)
    {
    scrollview.ScrollToAsync(0, 0,true);
    }

    This a stackoverflow answer that I found: stackoverflow.com/questions/51301671/xamarin-forms-scrollview-issue-with-editor-when-using-the-software-keyboard

  • pavan_alluripavan_alluri Member ✭✭

    Thanks @DurgaPrasadMailapalli. This works for me.

  • VijayGunarajVijayGunaraj Member ✭✭
    edited July 3

    If we need an editor to be used inside a scroll view, you can have this solution.
    ----
    --- ''
    ---
    -- <Grid.RowDefinitions>
    --
    -- </Grid.RowDefinitions>
    --
    --
    --"

  • VijayGunarajVijayGunaraj Member ✭✭
    edited July 3

    If you want an editor in a scrollview, you can try this solution.

    <ContentPage>
             <ScrollView >
                              <Grid VerticalOptions="FillAndExpand">
                                          <Grid.RowDefinitions>
                                           <RowDefinition Height="Auto" />
                                           </Grid.RowDefinitions>
                               
                             <Editor VerticalOptions="FillAndExpand"
                                                                   AutoSize="TextChanges"
                                        -----
                                        Grid.Row="0" />
                                 </Grid>
              </ScrollView>
            </ContentPage>
    

    You can Set hightRequest for the Scroll view if required.

Sign In or Register to comment.