Forum Xamarin.Forms
We are excited to announce that the Xamarin Forums are moving to the new Microsoft Q&A experience. Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

We encourage you to head over to Microsoft Q&A for .NET for posting new questions and get involved today.

How to prevent overflow and fit elements in parent

osklu002osklu002 Member ✭✭

This is a stacklayout which is inside a grid
<StackLayout Grid.Row="4" Grid.ColumnSpan="3" Orientation="Horizontal" Padding="10,0"> <Button AutomationId="AButton" ImageSource="a_image" HorizontalOptions="FillAndExpand" Visual="Material"> </Button> <Button AutomationId="BButton" ImageSource="b_image" HorizontalOptions="FillAndExpand" Visual="Material"> </Button> <Button AutomationId="CButton" ImageSource="c_image" HorizontalOptions="FillAndExpand" Visual="Material"> </Button> <Button AutomationId="DButton" ImageSource="d_image" HorizontalOptions="FillAndExpand" Visual="Material"> </Button> </StackLayout>

On small screens (<800) this causes the fourth button to overflow the StackLayout and end up outside the screen. Why?
A workaround is to set a WidthRequest to some of the buttons to fit everything on screen, but I would expect "FillAndExpand" to take up as much space as it can and not overflow.

Tagged:

Answers

  • JarvanJarvan Member, Xamarin Team Xamurai
    edited August 28

    On small screens (<800) this causes the fourth button to overflow the StackLayout and end up outside the screen. Why?

    To fix this issue, try to use the FlexLayout to wraps the buttons instead. FlexLayout is similar to the Xamarin.Forms StackLayout in that it can arrange its children horizontally and vertically in a stack. However, the FlexLayout is also capable of wrapping its children if there are too many to fit in a single row or column.

    Check the code:

    <FlexLayout Grid.Row="4" Grid.ColumnSpan="3" Direction="Row" Padding="10,0">
        <Button AutomationId="AButton" ImageSource="a_image" HorizontalOptions="FillAndExpand" Visual="Material"></Button>
        <Button AutomationId="BButton" ImageSource="b_image" HorizontalOptions="FillAndExpand" Visual="Material"></Button>
        <Button AutomationId="CButton" ImageSource="c_image" HorizontalOptions="FillAndExpand" Visual="Material"></Button>
        <Button AutomationId="DButton" ImageSource="d_image" HorizontalOptions="FillAndExpand" Visual="Material"></Button>
    </FlexLayout>
    
  • osklu002osklu002 Member ✭✭
    edited August 31

    Thank you for the reply! I will try this

    Edit: This did work in a sense but the FlexLayout seems to have different behaviour with it's parent because the Layout moved far from the StackLayouts position

    Flex:

    Stack:

  • JarvanJarvan Member, Xamarin Team Xamurai

    Try to set the JustifyContent property to SpaceBetween.

    <FlexLayout BackgroundColor="LightBlue" Direction="Row" JustifyContent="SpaceBetween" Padding="10,0" HorizontalOptions="FillAndExpand">
        ...
    </FlexLayout>
    
Sign In or Register to comment.