CODEWITHSUNDEEP
maui
Sam
Sam

Reputation: 30304

Setting size of editor for chat UI in .NET MAUI app

In my .NET MAUI app, I'm implementing chat feature and want to make sure that the Editor and Button are perfectly located at the bottom of the screen.

I created a Grid for the controls to produce this layout enter image description here

The problem I'm having is with the Editor width because if I get it to look right on Android, it's not perfect on iOS and vice versa.

Here's how I approached it:

<Grid
    RowDefinitions="50"
    ColumnDefinitions="*,50"
    RowSpacing="0"
    ColumnSpacing="5"
    HorizontalOptions="StartAndExpand"
    Margin="5,5,5,5">
   <Editor
      Grid.Column="0" />
   <Button
       Grid.Column="1" />
</Grid>

Other than entering some arbitrary number for WidthRequest for the Editor, how do I set the width for it so that it always takes up all the available space and look like it in the picture?

Upvotes: 0

Views: 687

Answers (1)

Alexandar May - MSFT
Alexandar May - MSFT

Reputation: 10148

After setting HorizontalOptions="FillAndExpand" as Jason suggested like below, it looks right on Android and iOS.


<Grid
    RowDefinitions="50"
    ColumnDefinitions="*,50"
    RowSpacing="0"
    ColumnSpacing="5"
    HorizontalOptions="FillAndExpand"
    Margin="5">
   <Editor
      Grid.Column="0" />
   <Button
       Grid.Column="1" />
</Grid>

Upvotes: 0

Related Questions