This is a recent issue and this only happens on Chrome (Version 76.0.3809.132). I've got a real simple dialog that contains a material ui (v4.3.3) Grid, some TextFields and 2 react-select(v3.0.4) Select boxes. The container is setup with justify flex-start and alignItems stretch. The input controls are simply wrapped up in Grid items all with fullWidth set on them. The issue I'm seeing is that on render, the TextFields don't stretch the entire width of the Grid while the Selects do. Here's where it gets interesting, if I tab cycle focus through the components the TextFields will snap to full width as soon as the react-select Select component gets focus, this also occurs if I just click into the react-select Select component. If I shift-tab cycle back to the TextFields, they snap back to their original stunted width.
If I remove the Selects from the Grid, the TextFields stretch the width of the container as expected. I've removed all custom styling from the react-select Select and it still exhibits the same behavior (TextFields displaying not at full width). I also tried a separate 3rd party react wrapper around react-select, react-select-material-ui, and it still exhibits the same behavior.
<Grid
container
direction="column"
justify="flex-start"
alignItems="stretch"
>
<Grid item>
<Select ... />
</Grid>
<Grid item>
<TextField ... />
</Grid>
<Grid item>
<TextField ... />
</Grid>
<Grid item>
<TextField ... />
</Grid>
<Grid item>
<Select ... />
</Grid>
</Grid>
As mentioned, this was working as expected until recently and only happens in Chrome. My expectation is that the TextFields will render the full width of the container consistently.
The latest version of Chrome (Version 77.0.3865.75) appears to have fixed a rendering issue. Things are rendering as expected now.
Related
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
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?
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>
I would like to add label above Syncfusion Datagrid but the label is hidden when I run the app in the following page.
See the following repos for complete app.
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="DataGrid.Views.OrderInfoRepositoryView"
xmlns:syncfusion="clr-namespace:Syncfusion.Maui.DataGrid;assembly=Syncfusion.Maui.DataGrid"
xmlns:local="clr-namespace:DataGrid"
Title="Order Info Repository View">
<ContentPage.BindingContext>
<local:OrderInfoRepositoryViewModel x:Name="viewModel" />
</ContentPage.BindingContext>
<ContentPage.Content>
<VerticalStackLayout Margin="20"
Spacing="10">
<Label Text="OrderInfo"
Margin="10,10,10,10"
TextColor="White"
BackgroundColor="Red"/>
<syncfusion:SfDataGrid x:Name="dataGrid"
ItemsSource="{Binding OrderInfoCollection}">
</syncfusion:SfDataGrid>
</VerticalStackLayout>
</ContentPage.Content>
Did try the following but same result.
<Label Text="OrderInfo"
Margin="10,10,10,10"
TextColor="White"
BackgroundColor="Red"/>
<syncfusion:SfDataGrid x:Name="dataGrid"
ItemsSource="{Binding OrderInfoCollection}">
</syncfusion:SfDataGrid>
</VerticalStackLayout>
Here Android screenshot
Added LineHeight and fontSize. No change
Tested with HeightRequest. No change.
It appears that you have set the Content for the ContentPage as DataGrid in OrderInfoRepositoryView.xaml.cs file. Please refer to the below file,
https://github.com/JeanMarcFlamand/MauiSyncFusionExamples/blob/master/DataGrid/Views/OrderInfoRepositoryView.xaml.cs#L12
You are adding the DataGrid as the content of the page in code behind i.e., OrderInfoRepositoryView constructor. That’s why the DataGrid alone is displaying without Label. We request that you remove the codes inside the OrderInfoRepositoryView constructor to overcome the issue.
I encountered an UI issue when developing an app using MAUI flyoutItem. According to the official doc, it looks like I can only define the flyoutItem appearance by setting two columns(https://learn.microsoft.com/en-us/dotnet/maui/fundamentals/shell/flyout?view=net-maui-7.0): one bind to FlyoutIcon and the other bind to Title.
What if I want to add a third item such as a label for identity/status or a slide button to enable/disable? I expect sth look like this:
[column 0]FlyoutIcon [column 1]Label1 [column 2]Label2/Slide Button
Can you please also show me some sample code for the solution?
Best and Regards
I tried to modify the Grid to add a third column and addition Label but seems not working.
<Shell ...>
...
<Shell.ItemTemplate>
<DataTemplate>
<Grid ColumnDefinitions="0.2*,0.4*,0.4*">
<Image Source="{Binding FlyoutIcon}"
Margin="5"
HeightRequest="45" />
<Label Grid.Column="1"
Text="{Binding Title}"
FontAttributes="Italic"
VerticalTextAlignment="Center" />
<Label Grid.Column="2"
Text="{Binding Text}"
FontAttributes="Italic"
VerticalTextAlignment="End" />
</Grid>
</DataTemplate>
</Shell.ItemTemplate>
</Shell>
Er, guys. Looks like using Menu Item instead of FlyoutItem will resolve the issue.
I'm trying to build a UI where there's a small section that's always at the top of the page, and a small section that's always at the bottom. The middle section I want to have fill up the entire rest of the page height. I thought it would be something like the XAML below but it's not working - the middle section never fills up the available space. Was hoping someone could point out what I'm doing wrong. Simplified markup below:
<Grid RowDefinitions="60,*,60" ColumnDefinitions="*">
<HorizontalStackLayout Grid.Row="0" Grid.Column="0">
<!-- top stuff here -->
</HorizontalStackLayout>
<VerticalStackLayout Grid.Row="1" Grid.Column="0" VerticalOptions="Fill">
<!-- middle section here -->
</VerticalStackLayout>
<Grid Grid.Row="2" Grid.Column="0">
<!-- bottom section here -->
</Grid>
</Grid>
NOTE: When pasting into this question the editor strips out the closing <//Grid> tag.
When in doubt, use ..AndExpand to be sure all space is used.
<Grid RowDefinitions="60,*,60" ColumnDefinitions="*"
VerticalOptions="FillAndExpand" >
...
<VerticalStackLayout Grid.Row="1" VerticalOptions="FillAndExpand" ...
UPDATE
Actually, your original code does what it should for me, testing on both Windows and Android, when I set MainPage = new MainPage(); and have that code in MainPage. With a BackgroundColor on the middle part, so I can see it expand as desired.
So, what is different in your setup?
Are you using AppShell?
Testing on platform other than Windows or Android?
You didn't test the "simplified markup" you show, so the problem is elsewhere in your actual markup?
Given the above image, how would I go about to setup my Absolute Layouts?
I would like to have my blue absolute layout overlap the red border absolute layout. I understand there's a doc explaining how AbsoluteLayouts work however I still don't completely understand it 100%.
I have tried setting up the layouts the following way but the blue square is always hidden.
With the below code I don't end up seeing the blue layout at all.
<AbsoluteLayout>
<AbsoluteLayout x:Name="BlueSquare">
<StackLayout> (Asumme there is a list of things in here) </StackLayout>
</AbsoluteLayout>
<AbsoluteLayout x:Name="RedBorderArea">
<StackLayout> (Asumme there is another list of stuff in here) </StackLayout>
</AbsoluteLayout>
</AbsoluteLayout>
After tinkering around I needed to add the Blue square layout last and i removed the RedSquares parent layout.
<AbsoluteLayout>
<StackLayout x:Name="RedBorderArea" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0.5,0.5,1,1"> (Asumme there is another list of stuff in here) </StackLayout>
<AbsoluteLayout x:Name="BlueSquare" LayoutFlags="PositionProportional, WidthProportional" LayoutBounds="1,0,1,1">
<StackLayout> (Asumme there is a list of things in here) </StackLayout>
</AbsoluteLayout>
</AbsoluteLayout>