Text Overlaps on LeadingView with Icon

XAML:
<control:SfTextInputLayout LeadingViewPosition="Inside"
   Style="{StaticResource InputLayoutStyleWithIcon}"
   Hint="Start Date">
<DatePicker Style="{StaticResource DatePickerStyle}"
Date="{Binding Date, Mode=TwoWay}"
>
</DatePicker>
<control:SfTextInputLayout.HintLabelStyle>
<control:LabelStyle FontSize="{StaticResource Smaller}" FontFamily="{StaticResource Montserrat-Regular}" />
</control:SfTextInputLayout.HintLabelStyle>
<control:SfTextInputLayout.ErrorLabelStyle>
<control:LabelStyle FontSize="{StaticResource Smaller}" FontFamily="{StaticResource Montserrat-Regular}" />
</control:SfTextInputLayout.ErrorLabelStyle>
<control:SfTextInputLayout.LeadingView>
<iconize:IconLabel Text="{StaticResource DateIcon}" Style="{StaticResource IconizeIconStyle}" />
</control:SfTextInputLayout.LeadingView>
</control:SfTextInputLayout>

Style:
<Style x:Key="InputLayoutStyleWithIcon" TargetType="inputLayout:SfTextInputLayout" BasedOn="{StaticResource inputLayoutStyle}">
<Setter Property="InputViewPadding" Value="{OnPlatform Android='0', iOS='0,5',UWP='0,5'}" />
<Setter Property="ContainerType" Value="Outlined" />
<Setter Property="OutlineCornerRadius" Value="8" />
<Setter Property="ReserveSpaceForAssistiveLabels" Value="False" />
<Setter Property="FocusedColor" Value="{StaticResource NavigationPrimary}" />
<Setter Property="EnableFloating" Value="True" />
</Style>

OUTPUT:


Any solution aside from adding spaces after the hint text?

Thanks!

1 Reply 1 reply marked as answer

SS Sridevi Sivakumar Syncfusion Team December 23, 2020 11:30 AM UTC

Hi abdiel corda,

Greetings from Syncfusion.

We have checked your reported problem and we would like to inform you that in your provided code snippet some style implementation section missing. So, we have checked the problem in our sample with provided details and the space section working fine at our end. Please have a sample from the below link.

Link: https://www.syncfusion.com/downloads/support/forum/160868/ze/OverlapIssueSample_2515200803

Since we are not aware of your exact application scenario, we were not able to reproduce this at our end, can you please revert us by modifying the sample based on your application along with replication procedure. This will be helpful for us to provide you better solution at the earliest. 

Regards,
Sridevi S.
 


Marked as answer
Loader.
Up arrow icon