CODEWITHSUNDEEP
blazormauimudblazormaui-blazor
user1202032
user1202032

Reputation: 1479

MAUI Blazor Hybrid different rendering on different platforms

I have a very simple component which, to my surprise, is rendered differently on different platforms despite being hosted inside a BlazorWebView.

On Windows, its rendered as expected. On Android, however, the text is not centered. How is this possible? I do not believe I have any platform-specific code.

And is it possible to resolve this issue, and get consistent output on both/all platforms?

The component:

<div Style="height:250px;background-color:coral;align-content: center;">
    <p style="text-align: center;">No items</p>
</div>

I have also re-created the component in MudBlazor here (same result): https://try.mudblazor.com/snippet/cumIbaGmMclCKdsj

Windows rendering:

Windows rendering

Android rendering:

Android rendering

Upvotes: 0

Views: 109

Answers (1)

Jessie Zhang -MSFT
Jessie Zhang -MSFT

Reputation: 13899

Yes, it is just the case as user1202032 said.

But we can use the following workaround:

<div Style="display:flex;height:250px;background-color:coral;">
    <p style="flex-grow: 1;text-align: center;align-self: center;">No items</p>
</div>

And we can check the following issue to get more information: MAUI Blazor Hybrid different rendering on different platforms.

Upvotes: 0

Related Questions