Localization PlaceholderText problem

Bug Reports
1

Hi,

The localization process is performed by using the StateGroup. For text works fine. But PlaceHolderText one on top of another. It shows correctly if I delete the value I have entered any values (Figure 3). How can I solve this problem or can I fix it?

Localization.ux

<StateGroup Active="{language}">
    <State Name="tr">
        <!-- SignUp -->
        <ResourceString Key="FirstName" Value="adı" />
        <ResourceString Key="LastName" Value="soyadı" />
        <ResourceString Key="Email" Value="e-posta" />
        <ResourceString Key="CID" Value="vatandaşlık numarası" />
        <ResourceString Key="GSM" Value="gsm" />
    </State>

    <State Name="en">
        <!-- SignUp -->
        <ResourceString Key="FirstName" Value="first name" />
        <ResourceString Key="LastName" Value="last name" />
        <ResourceString Key="Email" Value="email" />
        <ResourceString Key="CID" Value="citizen number" />
        <ResourceString Key="GSM" Value="gsm" />
    </State>
</StateGroup>

SignUp.ux

...
...
        <StackPanel Alignment="VerticalCenter" Margin="0,-10,0,0" >
            <Rectangle Width="345" Height="270" Color="white" CornerRadius="5">
                <StackPanel Alignment="VerticalCenter" Margin="50,5,50,0">
                    <FormInput Font="AvenirLight" ux:Name="_first_name" PlaceholderText="{Resource FirstName}" MaxLength="20" Value="{_first_name}" />
                    <FormInput Font="AvenirLight" ux:Name="_last_name" PlaceholderText="{Resource LastName}" MaxLength="20" Value="{_last_name}" />
                    <FormInput Font="AvenirLight" ux:Name="_email" PlaceholderText="{Resource Email}" InputHint="Email" MaxLength="40" Value="{_email}" />
                    <FormInput Font="AvenirLight" ux:Name="_citizen_number" PlaceholderText="{Resource CID}" InputHint="Integer" MaxLength="11" Value="{_citizen_number}" />
                    <FormInput Font="AvenirLight" ux:Name="_gsm" PlaceholderText="{Resource GSM}" InputHint="Phone" MaxLength="10" Value="{_gsm}" />
                </StackPanel>
            </Rectangle>
        </StackPanel>
...
...

Local Preview

Figure-1

Android Preview

Figure-2

Android Preview after word insert/delete action input

Figure-3

NOTE: Figure 2 in gsm fool you, the same word is used in both languages.

2

Hi!

What does the UX for <FormInput /> look like? I do not experience the same behavior when using <TextInput />.

3

Vegard Strand Lende wrote:

Hi!

What does the UX for <FormInput /> look like? I do not experience the same behavior when using <TextInput />.

Dear Lende,

<FormInput /> is custom define component.

<!-- TextInput -->
<TextInput ux:Class="FormInput" Font="AvenirLight" PlaceholderColor="#00000080" TextColor="#000000" CaretColor="startGray" />

I try with <TextInput /> but nothing change. The interesting part of the event when I delete enter any value correctly displayed.

4

Screenshot event outlines: Please click here to see. (Local preview) The same screen on phone that appears to be overlap.

5

Thanks!

Ill investigate

6

There are some issues with TextInput not being invalidated properly, thats why you experience this behavior. We have fixed these issues, it will be included in the next release.

If this is blocking you, you can try out the pre-release. It can be found at https://www.fusetools.com/downloads/channel/qa

Let me know if you have any further questions