Large TextView (Native element) inside non-native ScrollView doesn't respect clipping

[trusis666]

Reported on forum.

Fuse 1.7.3
LG Nexus Android 6.0
iPhone 7 iOs 11.2

When clicked on TextView with long text, it grows and overlaps Panel. This happens only on iOs and Android. In Fuse Preview works as expected, the text stays in ScrollView.

Code to reproduce:

<App>
    <DockPanel>
        <Panel Color="#18f" Height="60" Dock="Top">
            <Text Value="Page Header" FontSize="20" Color="White" Alignment="Center" Margin="45,0,45,0"/>
        </Panel>
        <ScrollView>
            <TextView Background="#fff" Value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in accumsan diam. Integer massa orci, lacinia nec mattis sagittis, placerat sit amet ante. Nulla sollicitudin malesuada neque eu mattis. Mauris dictum diam sed suscipit condimentum. Nam quis neque a mi ultricies malesuada. Maecenas rutrum risus et fringilla commodo. Etiam nec augue vel libero varius iaculis. In urna purus, pharetra vitae diam eu, rutrum convallis odio. Pellentesque condimentum nisi nec aliquet semper. Vestibulum nec venenatis dolor. Nullam quis ligula turpis. Etiam sit amet lectus mauris. Morbi convallis erat bibendum augue tincidunt maximus. Nunc ultricies quam eu tempor bibendum. Praesent sed nisl at nulla vestibulum consequat ut eget metus. Sed sit amet mollis leo. Aliquam eu imperdiet odio. In dapibus feugiat auctor. In vestibulum malesuada est non luctus. Quisque egestas justo nec tristique volutpat. Nullam hendrerit lectus sed viverra mollis. Pellentesque eget mattis erat. Integer maximus purus quis dui condimentum ullamcorper sed non mauris. Nulla facilisi. Nullam maximus nisl eu felis congue ultricies. Nullam nec odio vel lorem cursus laoreet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur ac massa justo. Nullam ante purus, interdum ut nibh ut, semper accumsan odio. Nullam varius, massa sit amet sagittis tincidunt, arcu lacus eleifend lectus, ut dapibus nulla dolor mollis sapien.Integer non dui non tellus molestie ultricies. Nulla quis nisi et nunc lobortis facilisis. Suspendisse vehicula dapibus mauris non egestas. Vivamus mattis commodo laoreet. Proin id ex nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum eu viverra nunc. Praesent ut dictum tortor, eu commodo turpis. Nam volutpat leo at massa commodo, vel accumsan erat sollicitudin. Sed condimentum nulla eu mi lobortis volutpat. Maecenas tincidunt orci lorem, sit amet efficitur dui ullamcorper non. Nam dictum posuere sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent viverra lacinia ante, quis sodales quam feugiat non." TextWrapping="Wrap"/>
        </ScrollView>
    </DockPanel>
</App>

[mortoray]

This is likely a clipping/sizing issue. On ioS/Android the TextView becomes a native control while editing, thus not clipped by the ScrollView bounds. I don't think there's really a way to fix this particular aspect.

The TextView should be limited in size somehow, to prevent it from being larger than the ScrollView region. Long text controls should offer their own scrolling, thus you don't need to scroll the ScrollView to edit the text.

[mortoray]

I've tested an limiting the max height works:

        <ScrollView ux:Name="s">
            <TextView Background="#fff" MaxHeight="height(s)" ...

Note that without this limited the native control it self will be larger than the screen, meaning the user can't edit it. The overlapped text is a minor issue in that regards.

I think limiting the height of a TextView within a ScrollView is a required practice if the element would get quite large. Quite likely the maximum should be even less than 100%, like only 5*FontSize or something instead.

Fixing this correctly would be quite difficult, as we'd somehow have to get clipping parameters for the native control. Possible, but a lot of work.