We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
  1. Home
  2. Forum
  3. Xamarin.Forms
  4. SFTextInputLayout inside AbsoluteLayout - Text Input Height

SFTextInputLayout inside AbsoluteLayout - Text Input Height

Hi,

I am trying to use the SFTextInputLayout inside an AbsoluteLayout however I cannot control the height of the Text Input based on the AbsoluteLayout proportional flow.

I can set the height of the Text Input by setting the RequestHeight however when I try to apply SetLayoutBounds and SetLayoutFlags on to either (or both) the SFTextInputLayour and the Editor which I am using as the FSText InputView the control renders with the default (single light height) + the controls normal additions for the hint+error texts.

How can I have the SFTextInputLayout (or its InputView) to respect the AbsoluteLayout rules?



6 Replies
BK Bharathiraja K Syncfusion Team February 14, 2019 12:39 PM UTC

Hi Neil, 
 
Greetings from Syncfusion. We have analyzed your query. But we clear with your exact requirement.  Text input layout works fine with Absolute Layout and its properties, in the below code snippet we have set the LayoutBounds and LayoutFlags as suggested.  
 
 
    <AbsoluteLayout> 
        <inputLayout:SfTextInputLayout 
            AbsoluteLayout.LayoutBounds=".5,.5,100,25" 
                AbsoluteLayout.LayoutFlags="PositionProportional" 
            Hint="Name"> 
            <Entry Text="John" /> 
        </inputLayout:SfTextInputLayout> 
    </AbsoluteLayout> 
 
 
 
 
 
 
Since we are not aware of your exact requirement, could you please reproduce your requirement with the attached sample or provide more information. It will be helpful to investigate and provide you solution earlier.  
 
Regards, 
Bharathiraja. 


NC Neil Cadman February 14, 2019 01:33 PM UTC

Hi Bharathiraja,

The following code will split up two editors so that both of them are exactly 50% of the height of the screen. This however I cannot achieve with the SFTextInputLayout and shown by the lower screen shot and code attempts.

The main problem is the "ViewControl" cannot be sized inside the Input Control with out setting the ViewControls height explicitly.. E.g HeightRequest = 400. 


Set the main views content to mainLayout  (E.g, this.Content = mainLayout)

AbsoluteLayout mainLayout = new AbsoluteLayout()
{
    VerticalOptions = new LayoutOptions(LayoutAlignment.Fill, true),
    HorizontalOptions = new LayoutOptions(LayoutAlignment.Fill, true),
    BackgroundColor = Color.Red
};


Editor _top = new Editor()
{
    BackgroundColor = Color.Blue
};
AbsoluteLayout.SetLayoutBounds(_top, new Rectangle(0, 0, 1, .5));
AbsoluteLayout.SetLayoutFlags(_top, AbsoluteLayoutFlags.All);

Editor _bottom = new Editor()
{
    BackgroundColor = Color.Yellow
};
AbsoluteLayout.SetLayoutBounds(_bottom, new Rectangle(1, 1, 1, .5));
AbsoluteLayout.SetLayoutFlags(_bottom, AbsoluteLayoutFlags.All);

mainLayout.Children.Add(_top);
mainLayout.Children.Add(_bottom);



Attempt 1 - Setting the size of the Sf Input

AbsoluteLayout mainLayout = new AbsoluteLayout()
            {
                VerticalOptions = new LayoutOptions(LayoutAlignment.Fill, true),
                HorizontalOptions = new LayoutOptions(LayoutAlignment.Fill, true),
                BackgroundColor = Color.Red
            };

            SfTextInputLayout sfInput = new SfTextInputLayout() {
                BackgroundColor = Color.Pink
            };
            Editor _top = new Editor()
            {
                BackgroundColor = Color.Blue,
                VerticalOptions = LayoutOptions.FillAndExpand, // Also teh same with out the Vertical and Horizontal options set
                HorizontalOptions = LayoutOptions.FillAndExpand
            };

            sfInput.InputView = _top;

            AbsoluteLayout.SetLayoutBounds(sfInput, new Rectangle(0, 0, 1, .5));
            AbsoluteLayout.SetLayoutFlags(sfInput, AbsoluteLayoutFlags.All);

            Editor _bottom = new Editor()
            {
                BackgroundColor = Color.Yellow
            };
            AbsoluteLayout.SetLayoutBounds(_bottom, new Rectangle(1, 1, 1, .5));
            AbsoluteLayout.SetLayoutFlags(_bottom, AbsoluteLayoutFlags.All);

            mainLayout.Children.Add(sfInput);
            mainLayout.Children.Add(_bottom);




Attempt 2 - Setting the height of the editor control used as the SF Input View Control


AbsoluteLayout mainLayout = new AbsoluteLayout()
            {
                VerticalOptions = new LayoutOptions(LayoutAlignment.Fill, true),
                HorizontalOptions = new LayoutOptions(LayoutAlignment.Fill, true),
                BackgroundColor = Color.Red
            };

            SfTextInputLayout sfInput = new SfTextInputLayout() {
                BackgroundColor = Color.Pink
            };
            Editor _top = new Editor()
            {
                BackgroundColor = Color.Blue,
                VerticalOptions = LayoutOptions.FillAndExpand,
                HorizontalOptions = LayoutOptions.FillAndExpand

            };

            sfInput.InputView = _top;

            AbsoluteLayout.SetLayoutBounds(_top, new Rectangle(0, 0, 1, .5));
            AbsoluteLayout.SetLayoutFlags(_top, AbsoluteLayoutFlags.All);

            Editor _bottom = new Editor()
            {
                BackgroundColor = Color.Yellow
            };
            AbsoluteLayout.SetLayoutBounds(_bottom, new Rectangle(1, 1, 1, .5));
            AbsoluteLayout.SetLayoutFlags(_bottom, AbsoluteLayoutFlags.All);

            mainLayout.Children.Add(sfInput);
            mainLayout.Children.Add(_bottom);



Attempt 3 - Setting bothjthe SF Input and the Editors heights.

            AbsoluteLayout mainLayout = new AbsoluteLayout()
            {
                VerticalOptions = new LayoutOptions(LayoutAlignment.Fill, true),
                HorizontalOptions = new LayoutOptions(LayoutAlignment.Fill, true),
                BackgroundColor = Color.Red
            };

            SfTextInputLayout sfInput = new SfTextInputLayout() {
                BackgroundColor = Color.Pink
            };
            Editor _top = new Editor()
            {
                BackgroundColor = Color.Blue,
                VerticalOptions = LayoutOptions.FillAndExpand,
                HorizontalOptions = LayoutOptions.FillAndExpand

            };

            sfInput.InputView = _top;

            AbsoluteLayout.SetLayoutBounds(sfInput, new Rectangle(0, 0, 1, .5));
            AbsoluteLayout.SetLayoutFlags(sfInput, AbsoluteLayoutFlags.All);

            AbsoluteLayout.SetLayoutBounds(_top, new Rectangle(0, 0, 1, .5));
            AbsoluteLayout.SetLayoutFlags(_top, AbsoluteLayoutFlags.All);

            Editor _bottom = new Editor()
            {
                BackgroundColor = Color.Yellow
            };
            AbsoluteLayout.SetLayoutBounds(_bottom, new Rectangle(1, 1, 1, .5));
            AbsoluteLayout.SetLayoutFlags(_bottom, AbsoluteLayoutFlags.All);

            mainLayout.Children.Add(sfInput);
            mainLayout.Children.Add(_bottom);



NC Neil Cadman February 14, 2019 01:39 PM UTC


The following might help explain what im looking for the control to do...

The SF Input is split up into three parts, the Hint (at the top), then the ViewControl (The Input text or editor) and the error message (bottom).

What I want the control to do is simply size the ViewControl to Fill and Expand both vertically and horizontally when the SP input controls height and width have been set.


BK Bharathiraja K Syncfusion Team February 20, 2019 12:52 PM UTC

Hi Neil,  
 
We have validated your query with the given code snippet. Initially we have aligned the hint as start position of text input layout, it will animate to the certain ratio, once input view is focused. If the text input layout height is like the bottom of editor control as you seen in the below screenshot, we cannot animate the hint to the maximum amount of height. We can expand the text input layout as per input view only by setting the HeightRequest property explicitly. You may go to other options when you don’t want to set the HeightRequest Property explicitly by setting the AutoSize property to TextChanges. We have provided the code snippet and screenshot for the same. 
 
Code Snippet [Xaml]: 
Editor _top = new Editor() 
            { 
                AutoSize = EditorAutoSizeOption.TextChanges 
            }; 
 
Screenshot, 
 
 
Regards, 
Bharathiraja.  


NC Neil Cadman February 20, 2019 02:34 PM UTC

If I the following it doesn't work, the text box grows but it grows past the height of the FsTextInputlayout ???




             AbsoluteLayout mainLayout = new AbsoluteLayout()
            {
                VerticalOptions = new LayoutOptions(LayoutAlignment.Fill, true),
                HorizontalOptions = new LayoutOptions(LayoutAlignment.Fill, true),
                BackgroundColor = Color.Red
            };

            SfTextInputLayout sfInput = new SfTextInputLayout()
            {
                BackgroundColor = Color.Pink
            };
            Editor _top = new Editor()
            {
                BackgroundColor = Color.Blue,
                AutoSize = EditorAutoSizeOption.TextChanges
            };

            sfInput.InputView = _top;

            AbsoluteLayout.SetLayoutBounds(sfInput, new Rectangle(0, 0, 1, .5));
            AbsoluteLayout.SetLayoutFlags(sfInput, AbsoluteLayoutFlags.All);

            Editor _bottom = new Editor()
            {
                BackgroundColor = Color.Yellow
            };
            AbsoluteLayout.SetLayoutBounds(_bottom, new Rectangle(1, 1, 1, .5));
            AbsoluteLayout.SetLayoutFlags(_bottom, AbsoluteLayoutFlags.All);

            mainLayout.Children.Add(sfInput);
            mainLayout.Children.Add(_bottom);

BK Bharathiraja K Syncfusion Team February 21, 2019 07:30 AM UTC

Hi Neil, 
 
Query: the text box grows but It grows the past the height of the SfTextInputLayout. 
This behavior will occur even when the editor is inside the stack layout instead of text input layout. To avoid overlapping with other controls, you should trigger the size changed event in the absolute layout. To know more about this, we have provided the sample and code snippet for your reference, 
 
Code snippet [XAML], 
private void MainLayout_SizeChanged(object sender, EventArgs e) 
        { 
            var spaceNeededForAssistiveLabels = 20; 
            _top.HeightRequest = mainLayout.Height / 2 - spaceNeededForAssistiveLabels; 
        } 
 
Sample Link:  
 
Please let us know if you have any other concerns on this. 
 
Regards, 
Bharathiraja. 


Loader.
Up arrow icon