Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: [Nested Tree View Styling] in [FluentDialog] #1988

Closed
beowulf29a opened this issue Apr 30, 2024 · 3 comments
Closed

fix: [Nested Tree View Styling] in [FluentDialog] #1988

beowulf29a opened this issue Apr 30, 2024 · 3 comments
Labels
area:browsers A browser specific issue bug A bug

Comments

@beowulf29a
Copy link

beowulf29a commented Apr 30, 2024

馃悰 Bug Report

The root items of a TreeView do not align when nested within a FluentDialog

馃捇 Repro or Code Sample


<FluentDialog>
    <FluentTreeView>
        <FluentTreeItem Text="Root item 1">
            <FluentTreeItem Text="Flowers">
                <FluentTreeItem Disabled="true" Text="Daisy" />
                <FluentTreeItem Text="Sunflower" />
                <FluentTreeItem Text="Rose" />
            </FluentTreeItem>
            <FluentTreeItem Text="Nested item 2" />
            <FluentTreeItem Text="Nested item 3" />
        </FluentTreeItem>
        <FluentTreeItem Text="Root item 2" />
        <FluentTreeItem Text="Root item 3" />
        <FluentTreeItem Text="Root item 4">
            <FluentDivider></FluentDivider>
            <FluentTreeItem Text="Flowers">
                <FluentTreeItem Disabled="true" Text="Daisy" />
                <FluentTreeItem Text="Sunflower" />
                <FluentTreeItem Text="Rose" />
            </FluentTreeItem>
            <FluentTreeItem Text="Nested item 2" />
            <FluentTreeItem Text="Nested item 3" />
        </FluentTreeItem>
        <FluentTreeItem Text="Root item 5 - Leaf Erikson" />
    </FluentTreeView>
</FluentDialog>

馃 Expected Behavior

Should look like the TreeView when not rendered within a FluentDialog
image

馃槸 Current Behavior

Align the items with no children with the items with children
image

馃拋 Possible Solution

Could manually update the styling

馃敠 Context

Would like to embed a treeview within a dialog control.

馃實 Your Environment

  • OS & Device: [e.g. MacOS, iOS, Windows, Linux] on [iPhone 7, PC]
  • Browser [e.g. Microsoft Edge, Google Chrome, Apple Safari, Mozilla FireFox]
  • .NET and Fluent UI Blazor library Version [e.g. 8.0.3 and 4.7.1]
@microsoft-github-policy-service microsoft-github-policy-service bot added the triage New issue. Needs to be looked at label Apr 30, 2024
@vnbaaij vnbaaij added bug A bug and removed triage New issue. Needs to be looked at labels May 2, 2024
@vnbaaij
Copy link
Collaborator

vnbaaij commented May 2, 2024

It seem this is an Edge/Chromium bug. There is something weird going on as the page frequently crashes when I change things in DevTools. When viewing the example in Firefox everything looks like it should,
I'll leave this open so we can track things, but I'm not expecting any changes from our side to solve this.

@vnbaaij vnbaaij added the area:browsers A browser specific issue label May 2, 2024
@beowulf29a
Copy link
Author

Thanks for the update! Hopefully can get resolved in the future :)

@vnbaaij
Copy link
Collaborator

vnbaaij commented May 13, 2024

Closing this as it is not solvable from our side (browser issue).

@vnbaaij vnbaaij closed this as not planned Won't fix, can't repro, duplicate, stale May 13, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area:browsers A browser specific issue bug A bug
Projects
None yet
Development

No branches or pull requests

2 participants