Contents of ScrollView go out of its bounds on Android preview

[Fernando_Lins]

Hello, I’m working on a very simple chat-like interface prototype at work and I have conflicting behaviors for a Scrollview on local and Android previews. Actually, I can’t get preview on Android to work so I’m using fuse build --target=Android --run.

Anyway, on local preview the UI displays just fine: the panels inside the ScrollView are displayed inside its bounds as you’d expect. Now when I run Android preview, the contents of the ScrollView go over and outside its bounds, even farther that the ScrollView’s own scroll bar/scroll position indicator does.

Below: scrolling working just fine in Local Preview

And here, a screenshot of it running in Android and the contents of the ScrollView going over the bottom panel

My UX goes like this:

<DockPanel>
    <Grid Rows="50, 1*, 100">
        <Panel />
        <ScrollView>
            <Style>
                ...
            </Style>
            <StackPanel>
                ...
            </StackPanel>
        </ScrollView>
           <Panel>
            <TextEdit />
        </Panel>
    </Grid>
</DockPanel>

I’ve even tried setting <ScrollView ClipToBounds="true"> but that did not change anything. Any ideas why this could be happening?

[Simo_Santavirta]

This is not a solution. I’ll just underline the issue for Fuse dudes. I think it’s combination of Text, TextWrapping=“Wrap” and Alignment=“TopLeft”.

Here’s an example:

<App Theme="Basic">

  <DockPanel>
      <iOS.StatusBarConfig Style="Dark" IsVisible="false" Animation="Slide" />
      <StatusBarBackground DockPanel.Dock="Top" />
      <BottomBarBackground DockPanel.Dock="Bottom"  />

      <DockPanel Alignment="Top">
          <Text Value="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
          quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
          cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
          proident, sunt in culpa qui officia deserunt mollit anim id est laborum." TextWrapping="Wrap" Margin="20" Alignment="Top">

              <Rectangle Layer="Background">
                  <SolidColor Color="#00FF00" />
              </Rectangle>

          </Text>

      </DockPanel>

  </DockPanel>

If the DockPanel Alignment is changed to TopLeft

<App Theme="Basic">

  <DockPanel>
      <iOS.StatusBarConfig Style="Dark" IsVisible="false" Animation="Slide" />
      <StatusBarBackground DockPanel.Dock="Top" />
      <BottomBarBackground DockPanel.Dock="Bottom"  />

      <DockPanel Alignment="TopLeft"> <!-- that one -->
          <Text Value="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
          quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
          cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
          proident, sunt in culpa qui officia deserunt mollit anim id est laborum." TextWrapping="Wrap" Margin="20" Alignment="Top">

              <Rectangle Layer="Background">
                  <SolidColor Color="#00FF00" />
              </Rectangle>

          </Text>

      </DockPanel>

  </DockPanel>

The result is this:

Also if the Text’s Alignment is set top TopLeft

<App Theme="Basic">

  <DockPanel>
      <iOS.StatusBarConfig Style="Dark" IsVisible="false" Animation="Slide" />
      <StatusBarBackground DockPanel.Dock="Top" />
      <BottomBarBackground DockPanel.Dock="Bottom"  />

      <DockPanel Alignment="Top">
          <Text Value="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
          quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
          cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
          proident, sunt in culpa qui officia deserunt mollit anim id est laborum." TextWrapping="Wrap" Margin="20" Alignment="TopLeft">  <!-- that one -->

              <Rectangle Layer="Background">
                  <SolidColor Color="#00FF00" />
              </Rectangle>

          </Text>

      </DockPanel>

  </DockPanel>

The result is buggy too:

[Simo_Santavirta]

Conclusion: I think the problem is that Alignment=“Top” is only one that works when there is Text with TextWrapping=“Wrap”

[Fernando_Lins]

Simo, Thanks for your reply. I’ll test it out right away.

[skezo]

Adding on to this.

If you add Alignment="Left" to a Text element that has Wrap defined it will treat its bouding box as if it is a single line even though it displays the wrapping text. This causes the elements to stack on top of each other if they are longer than one line. This issue only occurs on Android.

The below will reproduce the issue.

<StackPanel>
    <Text Alignment="Left" TextWrap="Wrap" Value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas volutpat tortor a tortor finibus, sed commodo urna gravida. Sed viverra, augue eget tincidunt lacinia, nibh neque feugiat enim, vitae malesuada sapien arcu eu erat. Sed bibendum velit a sem rhoncus facilisis." />
    <Text Alignment="Left" TextWrap="Wrap" Value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas volutpat tortor a tortor finibus, sed commodo urna gravida. Sed viverra, augue eget tincidunt lacinia, nibh neque feugiat enim, vitae malesuada sapien arcu eu erat. Sed bibendum velit a sem rhoncus facilisis." />
</StackPanel>

Remove Alignment="Left" and the issue will be resolved.