SearchBar not expanding horizontally

[owl-guy]

Description

As can be seen, the SearchBar does not expand to fit its parent.

Steps to Reproduce

1. Create a new .NET MAUI project
2. Add a SearchBar, either directly on the ContentPage or inside a Layout
3. The SearchBar will not adjust its size when no width is specified

Link to public reproduction project repository

https://github.com/owl-guy/SearchBarExample

Version with bug

Unknown/Other (please specify)

Last version that worked well

Unknown/Other

Affected platforms

Android

Affected platform versions

Android 11 and up

Did you find any workaround?

No response

Relevant log output

No response

[ghost]

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.

[owl-guy]

Any progress here?

[Laim]

Would be interesting to know if there has been any progress on this as I'm having the exact same issue. What's odder is that the BackgroundColor does expand to fit the parent, it's just the actual SearchBar elements that don't and the only way to fix it is to hardcode a value into WidthRequest.

<StackLayout>
  <Grid RowDefinitions="*,*" ColumnDefinitions="*,*">
    <SearchBar BackgroundColor="#FBCBF3" Grid.RowSpan="2" Grid.ColumnSpan="2" HorizontalOptions="FillAndExpand"/>
  </Grid>
</StackLayout>

and

<StackLayout>
  <SearchBar BackgroundColor="#FBCBF3" HorizontalOptions="FillAndExpand"/>
</StackLayout>

Both have the same result - inconsistent weird padding on both sides, no expanding. I've tried every layout possible.

[PramodMAUI]

Getting same issue. Searchbar is not expanding horizontally. Any workaround on this issue?

[vaidotasstrazdas]

One workaround is the following.

1. Put this to your view model:

public double ScreenWidth
{
  get
  {
    return DeviceDisplay.Current.MainDisplayInfo.Width / DeviceDisplay.Current.MainDisplayInfo.Density;
  }
}

It calculates the current screen width, so it is not some random value. Why division by density? Probably, more experienced users of the .NET MAUI can explain this, but it seems that logical pixels here are deduced through the relation of the pixels and density of the device. Of course, it would be much better that these relations would be encapsulated like it is done in Flutter. And finally, when the orientation of the device changes, you would need to recalculate this value again. Or you can just do not allow users changing the orientation which in my opinion would result in a quite poor UI/UX.

2. Then, use it like this: <SearchBar WidthRequest="{Binding ScreenWidth}" <... etc ...> />

It is a hack, but it is more hackish for the HorizontalOptions not to work in this case as the developer would expect. Hopefully, the team fill fix it soon, and this or similar hacks will no longer be needed for us. 😀

[PramodMAUI]

Hi @vaidotasstrazdas , This workaround will work if only Searchbar is used in a row. If we need to use a button placed with Searchbar in a row then it will not work as we are setting the entire width to SearchBar and the button will not fit in a single row with Searchbar.

Pls check attached screenshot for the design where this workaround will not work.

[jinxinjuan]

Verified this issue with Visual Studio Enterprise 17.7.0 Preview 1.0. Can repro on Android API-33 with sample project. SearchBarExample.

[jsuarezruiz]

Could you try again with the latest version?

[tibuprophen]

Not working for me with latest .NET and .NET Workloads

[FreakyAli]

@jsuarezruiz The issue still persists with the latest versions of Maui

[nonoc]

Yes I'm using NET 8 and same persistence not growing when It should be.

[owl-guy]

Will someone work on this?

[alexsmi-noveo]

In the latest NET7 (v7.0.18, sdk 7.0.315) issue is still reproducable. This workaround from @jfversluis helped me:

https://github.com/dotnet/maui/issues/7137#issuecomment-1456295151

[jfversluis]

@alexsmi-noveo this won't be fixed for .NET 7 so that is expected. You can indeed use the workaround.

@nonoc @FreakyAli would you be able to put together a small reproduction sample for this? The original problem should be fixed by #13716 so I'm curious why it is still not working for you.

[naxoscompact]

Another solution is to bind the width of the search bar to that of another control that is resizing as it should. typically our search bar relates to another item on screen - eg ListView or similar. Seems to be working for me <SearchBar HorizontalOptions="Start" Placeholder="Search" Text="{Binding SearchText, Mode=TwoWay}" WidthRequest="{Binding Width, Source={x:Reference ListView1}}" />

[FreakyAli]

@jfversluis Just saw this let me see what i can do

[FreakyAli]

So I checked this and it is working now but it adds a cancel button in iOS is this the intended behavior?

You can checkout this for reproduction: https://github.com/FreakyAli/Maui.FreakyEffects/tree/grahpicsViewBug

[jfversluis]

@FreakyAli would you be able to check if it adds the Cancel button on Xamarin.Forms?

Looking at the docs the Cancel button is expected.

I'm leaning towards this seems to be fixed 😄

[FreakyAli]

@jfversluis As long as it matches the docs it works for me :)

[jfversluis]

OK assuming this is fixed in the latest .NET MAUI versions. If you think otherwise, please open a new issue with all the details. Thanks!