Setting HelperText messes up height calculation and/or placement of a shadow

[Michael]

Hello,

I know this is more a bug report but your feedback form doesn't allow " < > ". So I have to post it here.

Setting HelperText on SfTextInputLayout messes up height calculation and/or placement of a border shadow. 

Good Case

The below code creates a green border shadow (without HelperText)

<Border VerticalOptions="Center" Padding="18" StrokeThickness="2" 
        Stroke="Red" 
        StrokeShape="RoundRectangle 20"
        BackgroundColor="Grey" 
        WidthRequest="350">
    <Border.Shadow>
        <Shadow Brush="Green" Offset="10,10" Radius="20" Opacity="0.65" />
    </Border.Shadow>

    <VerticalStackLayout Padding="10">
        <inputLayout:SfTextInputLayout  ContainerType="Outlined"
                                        IsHintAlwaysFloated="True"
                                        Hint="Name 1">
            <Entry Text="Test input 1" FontSize="16"></Entry>
        </inputLayout:SfTextInputLayout>

        <inputLayout:SfTextInputLayout  ContainerType="Outlined"
                                        IsHintAlwaysFloated="True"
                                        Hint="Name 2">
            <Entry Text="Test input 2" FontSize="16"></Entry>
        </inputLayout:SfTextInputLayout>

        <Button Text="OK" FontSize="16" TextColor="White"/>

    </VerticalStackLayout>
</Border>

Bad Case

The following code produces a somehow crippled shadow (with HelperText) 

<Border VerticalOptions="Center"Padding="18"StrokeThickness="2"
        Stroke="Red" 
        StrokeShape="RoundRectangle 20"
        BackgroundColor="Grey" 
        WidthRequest="350">
    <Border.Shadow>
        <Shadow Brush="Green" Offset="10,10" Radius="20" Opacity="0.65" />
    </Border.Shadow>

    <VerticalStackLayout Padding="10">
        <inputLayout:SfTextInputLayout  ContainerType="Outlined"
                                        IsHintAlwaysFloated="True"
                                        Hint="Name 1" 
                                        HelperText="Please add name">
            <Entry Text="Test input 1" FontSize="16"></Entry>
        </inputLayout:SfTextInputLayout>

        <inputLayout:SfTextInputLayout  ContainerType="Outlined"
                                        IsHintAlwaysFloated="True"
                                        Hint="Name 2" 
                                        HelperText="Please add name">
            <Entry Text="Test input 2" FontSize="16"></Entry>
        </inputLayout:SfTextInputLayout>

        <Button Text="OK" FontSize="16" TextColor="White"/>

    </VerticalStackLayout>
</Border>

Regards

Michael

[Shyam Sundar Datchina Moorthy]

Hi Michael,

 

Thank you for the detailed report and for sharing both the good and bad scenarios along with the code snippets.

 

We have checked this behavior, and the issue you’re seeing occurs due to how the Border calculates its size and shadow bounds when HelperText is rendered inside SfTextInputLayout. The additional helper text changes the internal layout measurement, which in turn affects how the shadow is drawn on the Border.

 

To resolve this, we recommend applying the shadow to a parent Grid instead of directly on the Border. With this approach, the shadow rendering remains consistent even when HelperText is used.

 

Below is the updated structure that works as expected:

<Grid>
    <Grid.Shadow>
        <Shadow Brush="Green" Offset="10,10" Radius="20" Opacity="0.65" />
    </Grid.Shadow>
    <Border x:Name="MainBorder" Grid.Row="1" VerticalOptions="Center" Padding="18" StrokeThickness="2" Stroke="Red" StrokeShape="RoundRectangle 20" BackgroundColor="Grey" WidthRequest="350">
        <VerticalStackLayout Padding="10">
            <inputLayout:SfTextInputLayout  ContainerType="Outlined" IsHintAlwaysFloated="True" Hint="Name 1" HelperText="Please add name">
                <Entry Text="Test input 1" FontSize="16"></Entry>
            </inputLayout:SfTextInputLayout>
            <inputLayout:SfTextInputLayout  ContainerType="Outlined" IsHintAlwaysFloated="True" Hint="Name 2" HelperText="Please add name">
                <Entry Text="Test input 2" FontSize="16"></Entry>
            </inputLayout:SfTextInputLayout>
            <Button Text="OK" FontSize="16" TextColor="White"/>
        </VerticalStackLayout>
    </Border>
</Grid>

 

With this structure, the shadow is rendered correctly regardless of whether HelperText is set on SfTextInputLayout.

 

Please try this workaround and let us know if it resolves the issue in your scenario. We’ll be happy to assist further if needed.

 

Regards,

Shyam Sundar D

[Michael]

Hi Shyam,

thanks for your fast reply. Your solution fixes my problem just fine. 

Thanks alot!

Regards

Michael  

[Preethi Rajakandham]

Hi Michael,

You are welcome.
We are glad to know that the reported problem has been resolved. Please let us know if you require any further assistance with this. We will be happy to assist you.

Regards,
Preethi R