Articles in this section
Category / Section

How to Reduce the Inner Padding of Xamarin.Forms Text Input Layout?

1 min read

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



Conclusion
I hope you enjoyed learning how to reduce the inner padding of Xamarin.Forms text input layou.
You can refer to our Xamarin.Forms Text Input Layout feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Xamarin.Forms Text Input Layout example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forumsDirect-Trac, or feedback portal. We are always happy to assist you!




Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied