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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to reduce the inner padding of Xamarin.Forms text input layout

Platform: Xamarin.Forms |
Control: SfTextInputLayout |
Published Date: February 27, 2020 |
Last Revised Date: June 11, 2020

The space inside the Xamarin.Forms SfTextInputLayout can be customized using the InputViewPadding property as shown in the following code snippet.

 

[XAML]

<inputLayout:SfTextInputLayout ContainerType="Outlined" InputViewPadding="5">
    <Entry Text="InputViewPadding 5" />
</inputLayout:SfTextInputLayout>

 

Output

InputViewPadding for SfTextInputLayout

 

To obtain the same space reduction for having different input views in SfTextInputLayout as follows.

Same appearance with different Input Views.

 

Set the appropriate value for both the InputViewPadding and height of input view as follows

 

 

iOS and UWP

Android

InputViewPadding

11 for left and right and 6 for top and bottom.

11 for left and right and 0 for top and bottom.

Height request of input view

24

36 (Input view height + top padding + bottom padding).

 

 

[XAML]

<Grid>
 
    <inputLayout:SfTextInputLayout ContainerType="Outlined" Hint="SfComboBox"
        InputViewPadding="{OnPlatform Android='11,0,11,0',
                                      iOS='11,6,11,6',
                                      UWP='11,6,11,6'}">
        <comboBox:SfComboBox HeightRequest="{OnPlatform Android=36, iOS=24, UWP=24}">
            . . .
 
        </comboBox:SfComboBox>
    </inputLayout:SfTextInputLayout>
 
    <inputLayout:SfTextInputLayout Grid.Column="1" ContainerType="Outlined" Hint="Entry"
        InputViewPadding="{OnPlatform Android='11,0,11,0',
                                      iOS='11,6,11,6',
                                      UWP='11,6,11,6'}">
        <Entry HeightRequest="{OnPlatform Android=36, iOS=24, UWP=24}" Text="Entry" />
    </inputLayout:SfTextInputLayout>
 
</Grid>

See Also

Available container customization in Xamarin.Forms SfTextInputLayout

How to align leading and trailing views in Xamarin.Forms SfTextInputLayout

Color customization in Xamarin.Forms SfTextInputLayout

2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile