search

dotnet / aspnetcore

ASP.NET Core is a cross-platform .NET framework for building modern cloud-based web applications on Windows, Mac, or Linux.
https://asp.net
MIT License
35.48k stars 10.04k forks source link

blazor: Virtualize does not respond to items with CSS Flex #40123

Closed tossnet closed 2 years ago

tossnet commented 2 years ago

Is there an existing issue for this?

Describe the bug

Items are not displayed anymore if the container style uses Flex

Expected Behavior

No response

Steps To Reproduce

This is my code to reproduce : in my razor page : 

@using System.Linq

Virtualized:
<div class="container">
    <Virtualize Items="@items" Context="item" ItemSize="20">
        <div class="itemRow" @key="@item" >@item</div>
    </Virtualize>
</div>

 with Flex : not Virtualized:
<div class="container2" >
    <Virtualize Items="@items" Context="item" ItemSize="20">
        <div class="itemRow" @key="@item" >@item</div>
    </Virtualize>
</div>

@code {
int[] items = Enumerable.Range(0, 200).ToArray();
}

In my Index.razor.css

.container {
    overflow-y: scroll;
    height: calc(40vh);
    border: 1px solid blue;
}

.container2 {
    display: flex;
    flex-direction: column;

    border: 1px solid blue;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    height: calc(40vh);
}

Exceptions (if any)

dotnet --info .NET SDK (reflecting any global.json): Version: 6.0.200-preview.22055.15 Commit: a3c3a2bf3b

Runtime Environment: OS Name: Windows OS Version: 10.0.22000 OS Platform: Windows RID: win10-x64 Base Path: C:\Program Files\dotnet\sdk\6.0.200-preview.22055.15\

Host (useful for support): Version: 6.0.2 Commit: 839cdfb0ec

.NET SDKs installed: 3.0.100-preview9-014004 [C:\Program Files\dotnet\sdk] 3.0.100-rc1-014190 [C:\Program Files\dotnet\sdk] 3.1.200-preview-014883 [C:\Program Files\dotnet\sdk] 3.1.300-preview-015135 [C:\Program Files\dotnet\sdk] 3.1.416 [C:\Program Files\dotnet\sdk] 5.0.100-preview.8.20417.9 [C:\Program Files\dotnet\sdk] 5.0.100-rc.1.20452.10 [C:\Program Files\dotnet\sdk] 5.0.200-preview.20601.7 [C:\Program Files\dotnet\sdk] 5.0.200-preview.20614.14 [C:\Program Files\dotnet\sdk] 5.0.300-preview.21228.15 [C:\Program Files\dotnet\sdk] 5.0.405 [C:\Program Files\dotnet\sdk] 6.0.200-preview.22055.15 [C:\Program Files\dotnet\sdk]

.NET runtimes installed: Microsoft.AspNetCore.App 3.0.0-preview9.19424.4 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App] Microsoft.AspNetCore.App 3.1.22 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App] Microsoft.AspNetCore.App 5.0.0-preview.8.20414.8 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App] Microsoft.AspNetCore.App 5.0.0-rc.1.20451.17 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App] Microsoft.AspNetCore.App 5.0.1 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App] Microsoft.AspNetCore.App 5.0.4 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App] Microsoft.AspNetCore.App 5.0.6 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App] Microsoft.AspNetCore.App 5.0.9 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App] Microsoft.AspNetCore.App 5.0.12 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App] Microsoft.AspNetCore.App 5.0.14 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App] Microsoft.AspNetCore.App 6.0.0-preview.5.21301.17 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App] Microsoft.AspNetCore.App 6.0.0-rc.1.21452.15 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App] Microsoft.AspNetCore.App 6.0.1 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App] Microsoft.AspNetCore.App 6.0.2 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App] Microsoft.NETCore.App 3.0.0-preview9-19423-09 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.NETCore.App 3.1.22 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.NETCore.App 5.0.0-preview.8.20407.11 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.NETCore.App 5.0.0-rc.1.20451.14 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.NETCore.App 5.0.1 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.NETCore.App 5.0.4 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.NETCore.App 5.0.6 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.NETCore.App 5.0.9 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.NETCore.App 5.0.12 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.NETCore.App 5.0.14 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.NETCore.App 6.0.0-preview.5.21301.5 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.NETCore.App 6.0.0-rc.1.21451.13 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.NETCore.App 6.0.1 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.NETCore.App 6.0.2 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.WindowsDesktop.App 3.0.0-preview9-19423-09 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App] Microsoft.WindowsDesktop.App 3.1.22 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App] Microsoft.WindowsDesktop.App 5.0.0-preview.8.20411.6 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App] Microsoft.WindowsDesktop.App 5.0.0-rc.1.20452.2 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App] Microsoft.WindowsDesktop.App 5.0.1 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App] Microsoft.WindowsDesktop.App 5.0.4 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App] Microsoft.WindowsDesktop.App 5.0.6 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App] Microsoft.WindowsDesktop.App 5.0.9 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App] Microsoft.WindowsDesktop.App 5.0.12 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App] Microsoft.WindowsDesktop.App 5.0.14 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App] Microsoft.WindowsDesktop.App 6.0.1 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App] Microsoft.WindowsDesktop.App 6.0.2 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]

To install additional .NET runtimes or SDKs:

.NET Version

Version: 6.0.200-preview.22055.15 No response

tossnet commented 2 years ago

https://user-images.githubusercontent.com/3845786/153472575-680c26bb-563e-4158-9ed2-16bf53721acb.mp4

mkArtakMSFT commented 2 years ago

Thanks for contacting us. Have you checked the documentation on virtualization component usage? We have some section there describing what is possible and what is not, so would be great if you could go over it and see whether you find a solution for your problem: https://docs.microsoft.com/en-us/aspnet/core/blazor/components/virtualization?view=aspnetcore-6.0#advanced-styles-and-scroll-detection

If not, please let us know and we'll look into this further.

ghost commented 2 years ago

Hi @tossnet. We have added the "Needs: Author Feedback" label to this issue, which indicates that we have an open question for you before we can take further action. This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

tossnet commented 2 years ago

Hi @mkArtakMSFT. Yes, thank you, it is thanks to DOCS that I discovered VIRTUALIZE. By the way it says: S"croll container styling requires a display with any of the following values: block (the default for a div). table-row-group (the default for a tbody). flex with flex-direction set to column."

The problem occurs when i use : display: flex; with flex-direction: column;

ghost commented 2 years ago

Thanks for contacting us. We're moving this issue to the .NET 7 Planning milestone for future evaluation / consideration. Because it's not immediately obvious that this is a bug in our framework, we would like to keep this around to collect more feedback, which can later help us determine the impact of it. We will re-evaluate this issue, during our next planning meeting(s). If we later determine, that the issue has no community involvement, or it's very rare and low-impact issue, we will close it - so that the team can focus on more important and high impact issues. To learn more about what to expect next and how this issue will be handled you can read more about our triage process here.

SteveSandersonMS commented 2 years ago

Thanks for the update, @tossnet. I had a look at your scenario and the issue is that your CSS allows all the elements within your flex container to shrink based on their content. Since the placeholder elements have no content, they shrink to zero height and hence no longer take effect.

If you're going to use display:flex on the container, then you also need some CSS rule like this:

.container2 > div {
    flex-shrink: 0;
}

I recognize this isn't explicitly called out in the docs, so I've filed https://github.com/dotnet/aspnetcore/issues/40262 to consider the possibility of adding the style automatically, and to update the docs about it in the meantime.