SFTextInputLayout inside AbsoluteLayout - Text Input Height
6 Replies
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>
|
Sample link: http://www.syncfusion.com/downloads/support/forum/142643/ze/TextInputlayoutInAbsoluteLayout1257936157.zip
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.
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)
Attempt 1 - Setting the size of the Sf Input
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
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(_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);
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.
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.
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.
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);
SIGN IN To post a reply.
