Align the Helper Text/Error text that has Leading View Icon

Good day,

Would like to ask if there's a way to override the position of Helper/Error text on SfTextInputLayout  thas has Icon (LeadingVIew)? I need to align the helper text starting from the icon until the end of control.




Attachment: Capture_9de52239.zip

3 Replies 1 reply marked as answer

MK Muneesh Kumar G Syncfusion Team January 26, 2021 06:19 AM UTC

Hi Abdiel corda, 
  
Greetings from Syncfusion.  
  
We have analyzed your requirement and we have achieved that by adding helper text in leading view as per the below code snippet.  
  
Code snippet 
 
<inputLayout:SfTextInputLayout Hint="Name" LeadingViewPosition="Inside"  
                                       ContainerType="Outlined"> 
             
            <Entry x:Name="entry" TextChanged="Entry_TextChanged"/> 
             
            <inputLayout:SfTextInputLayout.LeadingView> 
                <StackLayout Orientation="Horizontal" WidthRequest="120"> 
                    <Label  Text="&#x1F5D3;" Margin="5,0,5,0" VerticalTextAlignment="Center"/> 
                    <Label Text="Enter Name" x:Name="label1" VerticalTextAlignment="Center"/> 
                </StackLayout> 
                
            </inputLayout:SfTextInputLayout.LeadingView> 
             
        </inputLayout:SfTextInputLayout> 
 
 
private void Entry_TextChanged(object sender, TextChangedEventArgs e) 
        { 
            if(Regex.IsMatch(entry.Text, @"^[a-zA-Z]+$")) 
            { 
                label1.Text = "Enter Name"; 
                label1.TextColor = Color.Black; 
            } 
            else 
            { 
                label1.Text = "Invalid Name"; 
                label1.TextColor = Color.Red; 
            } 
        } 
 
We have prepared a sample based on this and it can be downloaded from the link below.  
 
 
Let us know if you have any other queries.  
 
Thanks,  
Muneesh Kumar G  
 



YA Yas January 26, 2021 12:10 PM UTC

Hi, thank you for your reply. My bad, my explanation was wrong, please see the my latest attached file for the requirement. 

Attachment: NEED_669ca56f.rar


MK Muneesh Kumar G Syncfusion Team January 26, 2021 01:14 PM UTC

Hi Abdiel corda,  
 
Thanks for your update.  
 
We have analyzed your requirement and current we don’t have direct support for this. So, we have achieved that by extending SfTextInputLayout and changed helper label grid position as per the below code snippet.  
 
Code snippet 
 
public class SfTextInputLayoutExt : SfTextInputLayout 
    { 
                        public SfTextInputLayoutExt() :base() 
                           { 
                                    Grid grid = typeof(SfTextInputLayout).GetField("bottomGrid", System.Reflection.BindingFlags.NonPublic | 
                                                System.Reflection.BindingFlags.Instance).GetValue(this) as Grid; 
 
                                    Grid.SetColumn(grid, 0); 
                         } 
    } 
 
 
 
<local:SfTextInputLayoutExt Hint="Name" LeadingViewPosition="Inside"   
                                   HelperText="Enter Name" ShowHelperText="True" 
                                       ContainerType="Outlined"> 
 
        <Entry x:Name="entry" /> 
 
        <inputLayout:SfTextInputLayout.LeadingView> 
            <Label  Text="&#x1F5D3;"/> 
        </inputLayout:SfTextInputLayout.LeadingView> 
 
    </local:SfTextInputLayoutExt> 
 
 
Let us know if you have any other queries.  
 
Thanks, 
Muneesh Kumar G 


Marked as answer
Loader.
Up arrow icon