Text input layout resizes when used with custom font

[William]

Hi there,

I have a problem in my app when using the SfTextInputLayout with a custom font. I have an SfMaskedEntry inside of the SfTextInputLayout, and when the control is focussed then the control resizes to a smaller height. This is leading to many visual glitches within my app. Interestingly the same thing does not happen when an Entry is used instead.

I have created a sample that shows the issue here. As you can see, when the first control is focussed it gets resized. This does not happen with the control on the second row that contains an Entry. Both use custom fonts.

Many thanks

Will

Edit: I have been experiencing this at least on Android. I have not tested on iOS due to current issues building iOS projects with Visual Studio.

[Sridevi Sivakumar]

Hi William,

Greetings from Syncfusion.

We have checked your shared sample and this problem occurs due to in-proper layout measure in load time with custom font.

We can resolve it in sample level by setting the PromptChar property directly to the SfMaskedEdit rather than setting the value through style, as per the below code snippet

[XAML]: 

<Style TargetType="maskededit:SfMaskedEdit"> 

<Setter Property="FontFamily" Value="D-DIN" /> 

<Setter Property="PromptChar" Value="-" /> 

<Setter Property="ValidationMode" Value="LostFocus" /> 

</Style> 

 

[C#]: 

<inputLayout:SfTextInputLayout Hint="Name"> 

            <maskededit:SfMaskedEdit x:Name="maskedEdit" PromptChar="-"     Mask="00/00/0000" /> 

</inputLayout:SfTextInputLayout> 

 

 

Let us know if you need any further assistance. 

Regards,
Sridevi S. 

[William]

Hi Sridevi,

Thank you for taking the time to investigate. I have tried your suggestion and I agree it works in the sample app. However if I do the same in my personal app that I am working on I still see the problem for some reason.

I will try to investigate further.

Will

[William]

Hi again,

I have updated the sample with a few more Style setters that are present in my app, and can see that the issue is now occurring again. It is not really possible to set all of these individually on controls without using styles, maybe this can be filed as a bug?

Many thanks

Will

EDIT: In fact, removing the style completely and just using the masked edit like this:

also causes the issue, definitely a bug I think!!

[Sridevi Sivakumar]

Hi William,

We would like to inform you that,  you can resolve it by setting same font-family to both control and water mark text of SfMaskedEdit. Please refer the below code snippet. 

[XAML]:  

  <maskededit:SfMaskedEdit x:Name="maskedEdit" FontFamily="D-DIN" WatermarkFontFamily="D-DIN" Mask="00/00/0000" /> 

Can you please check your application with the above code snippet and let us know if you need any further assistance.

Regards,
Sridevi S. 

[William]

Hi Sridevi,

Thanks, that was the solution I needed. As well as setting the FontFamily and WatermarkFontFamily to be the same, I also needed to set FontSize and WatermarkFontSize to the same value. Now everything is working as expected.

Incidentally setting the PromptChar in the style works fine now.

Many thanks,

Will

[Ramya Soundar Rajan]

Hi William, 

 

We are glad that you have resolved the problem and your feedback.  

 

Regards, 

Ramya S