Horizontal and vertical alignment of FlexGrid not working properly on Android

Horizontal and vertical alignment of FlexGrid not working properly on Android

Posted by: jared.fritsch on 25 October 2017, 1:53 am EST

• 

  jared.fritsch

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 25 October 2017, 1:53 am EST

  I’m trying to display a FlexGrid at the bottom of my page, centered horizontally.

  
  <ContentPage.Content>
      <ContentView
          VerticalOptions="FillAndExpand">
          <c1:FlexGrid
              VerticalOptions="End"
              HorizontalOptions="Center"
              x:Name="TheGrid"
              AutoGenerateColumns="True" />
      </ContentView>
  </ContentPage.Content>
  
  

  This works great on UWP and iOS. It grows both vertically and horizontally with the content of the FlexGrid. However, on Android, the FlexGrid doesn’t show at all. This will work on Android if I provide a HeightRequest and a WidthRequest for the FlexGrid. For my current requirements, I will be giving it a HeightRequest, but I would like the FlexGrid to grow horizontally as it needs to, so I can’t give it a WidthRequest.

  I am using FlexGrid version 2.3.20172.189 and have verified this not working properly on Android versions 6.0, 7.0, and 7.1.

• 

  kelley.ricker

  • Post Options:
  • Link
    Copy

  Posted 26 October 2017, 7:51 am EST

  Hi Jared

  That looks like a bug to me. I’ll talk to the developers about it.

  Kelley

• 

  kelley.ricker

  • Post Options:
  • Link
    Copy

  Posted 26 October 2017, 8:06 am EST

  After thinking about this I’ll note that I did test this a bit I did find that the following works:

  
      <c1:FlexGrid x:Name="grid" HeightRequest="200" VerticalOptions="End" AutoGeneratingColumn="OnAutoGeneratingColumn"/>
  
  

  It should automatically fill space horizontally on all platforms as well. It might be partially by design that the control doesn’t expand when both “End” and “Center” have been specified since those layout options usually imply a fixed size:

  https://developer.xamarin.com/api/type/Xamarin.Forms.LayoutOptions/

  I think you’re right though to point this out. Something doesn’t see quite right.

• 

  jared.fritsch

  • Post Options:
  • Link
    Copy

  Posted 26 October 2017, 8:46 am EST

  I’m not looking for it to expand horizontally to fill the screen. I’m looking for it to expand horizontally with the content.

  <ContentPage.Content>
      <c1:FlexGrid
          x:Name="TheGrid"
          VerticalOptions="End"
          HorizontalOptions="Center"
          AutoGenerateColumns="True" />
  </ContentPage.Content>
  

  See the screenshot attachments. Notice how it shows up on UWP and iOS, but nothing is shown on Android.

• 

  kelley.ricker

  • Post Options:
  • Link
    Copy

  Posted 27 October 2017, 12:36 am EST

  Thanks, Jared. I understand a little better. Let me see what the developers have to say.

• 

  jared.fritsch

  • Post Options:
  • Link
    Copy

  Posted 27 October 2017, 4:33 am EST

  Thanks. Sorry for the confusion.

• 

  jared.fritsch

  • Post Options:
  • Link
    Copy

  Posted 9 November 2017, 3:18 am EST

  Any update on this?

• 

  kelley.ricker

  • Post Options:
  • Link
    Copy

  Posted 9 November 2017, 8:06 am EST

  No, unfortunately Layout issues can be very complicated, and it’s still not clear whether this is something in FlexGrid or a bug in Xamarin.Forms generally that’s causing the issue. Hard coding the values is sometimes the only reliable solution since the Xamarin.Forms layouts sometimes run into conflicts with the native Android layouts. I might be able to write a method that mimics the behavior you seem on the other platforms, but actually explicitly sets a width for the FlexGrid which you could run exclusively for Android. Let me think some more about it, and I’ll get back to you.

• 

  kelley.ricker

  • Post Options:
  • Link
    Copy

  Posted 10 November 2017, 3:11 am EST

  Hi Jared

  I think you could use this as a workaround. Basically create a method for Android that will sum up the Column widths (including the RowHeader Columns), add any additional width for the borders, and then explicitly set the widthRequest of the FlexGrid.

   private void SizeGridToContent()
          {
              double width = 0;
              foreach (GridColumn rowHeader in grid.RowHeaders.Columns)
              {
                  width += rowHeader.Width.Value;
              }
              foreach (GridColumn col in grid.Columns)
              {
                  width += col.Width.Value;
              }
              width += (grid.BorderWidth * 2);
              grid.WidthRequest = width;
          }
  

  You could restrict the code execution to Android and call it from the page constructor:

              switch(Device.RuntimePlatform){
                  case Device.Android:
                      SizeGridToContent();
                      break;
              }
  

  I think that would give you a very similar behavior on Android. If we have a fix for the layout bug I’ll let you know, but as I said they tend to be very complicated, time consuming, and subtle.

  Kelley

• 

  jared.fritsch

  • Post Options:
  • Link
    Copy

  Posted 14 November 2017, 4:27 am EST

  Thanks for the workaround! Looks like that would probably do the trick.