Skip to content

FlexLayout items with Dynamic Width are not updating correctly on orientation change or scroll in Android #31109

@ishara-rd

Description

@ishara-rd

Description

When using a FlexLayout with a CardViewDataTemplateSelector and the subitem has dynamically bound WidthRequest (via MultiBinding using a converter), the layout sizes render correctly on initial load in Android. However:

  1. On orientation change, the sizes do not refresh immediately.
  2. Scrolling sometimes causes certain items to display with incorrect widths.
  3. Scrolling again can "fix" the broken items, but then break others.

This issue only reproduces in Android — iOS handles it as expected.

Steps to Reproduce

  1. Create new Maui app.

  2. Create a Grid inside a CardView item with dynamic width based on the ParentWidth and static SizeHint(Small, Medium, Large, FullWidth) :

Grid layout = new()
{
    Style = (Style)Resources["CardViewFieldLayoutStyle"],
    ColumnDefinitions =
    {
        new ColumnDefinition { Width = GridLength.Auto },
        new ColumnDefinition { Width = GridLength.Star }
    },
    RowDefinitions =
    {
        new RowDefinition {Height = GridLength.Star}
    },
};

ParentWidthBehavior parentWidthBehavior = new ParentWidthBehavior();
this.Behaviors.Add(parentWidthBehavior);

MultiBinding multiBinding = new MultiBinding
{
    Converter = new CardSizeHintToWidthConverter(),
    ConverterParameter = this,
    Bindings =
    {
        new Binding(nameof(CardViewItemContext.SizeHint), BindingMode.OneWay),
        new Binding(nameof(ParentWidthBehavior.ParentWidth), BindingMode.OneWay, source: parentWidthBehavior)
    }
};

layout.SetBinding(VisualElement.WidthRequestProperty, multiBinding);
  1. Use a FlexLayout to host these CardViews with a CardViewDataTemplateSelector:
_content = new FlexLayout()
{
    Style = (Style)Resources["CardViewContentStyle"],
};

BindableLayout.SetItemTemplateSelector(_content, new CardViewDataTemplateSelector());

3.Run the app on Android.

4.Observe:

  • On initial load, sizes render correctly.
  • Scroll the list → some items lose correct widths.
  • Rotate the device → widths are not updated until scrolling happens.
  • Scrolling again sometimes fixes some items but breaks others.

Link to public reproduction project repository

No response

Version with bug

9.0.21 SR2.1

Is this a regression from previous behavior?

No, this is something new

Last version that worked well

No response

Affected platforms

Android

Affected platform versions

Pixel 8, Android 14

Did you find any workaround?

No response

Relevant log output

Metadata

Metadata

Assignees

No one assigned

    Labels

    area-layoutStackLayout, GridLayout, ContentView, AbsoluteLayout, FlexLayout, ContentPresenterlayout-flexFlexLayout issuesplatform/androids/triagedIssue has been revieweds/verifiedVerified / Reproducible Issue ready for Engineering Triaget/bugSomething isn't working

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions