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’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Button area overflows the window in a wide TaskDialog #555

Closed
PremekTill opened this issue Apr 20, 2024 · 1 comment
Closed

Button area overflows the window in a wide TaskDialog #555

PremekTill opened this issue Apr 20, 2024 · 1 comment
Labels
bug Something isn't working

Comments

@PremekTill
Copy link

Describe the bug
When using a TaskDialog with a wide SubHeader which auto-wraps after one or more spaces, the button area background overflows the edges of the dialog.

Screenshots

Right edge of the button area overflows (light mode).

Right edge of the button area overflows (dark mode).

Works correctly for narrow content.

Desktop/Platform (please complete the following information):

  • OS: Windows 10
  • FluentAvalonia Version 2.1.0-preview2, 2.1.0-preview1, 2.0.5
  • Avalonia Version 11.1.0-beta1, 11.0.4

Additional context
To reproduce:

  • Create a new avalonia xplat solution.
  • Add a Button to the MainView and bind the following as its Click handler:
    private void Button_OnClick(object? sender, RoutedEventArgs e)
    {
        var warning = new TaskDialog
        {
            XamlRoot = this,
            Title = "Warning",
            IconSource = new SymbolIconSource { Symbol = Symbol.ImportantFilled },
            Header = "Update Firmware",
            SubHeader = _firmwareWarning,
            Buttons = [TaskDialogButton.YesButton, TaskDialogButton.CancelButton],
        };

        _ = warning.ShowAsync();
    }
  • Afterwards, you can test different strings as the message:
private const string _firmwareWarning = "This operation will irreversibly modify the firmware of the radar. Are you sure you want to proceed?";

This string will wrap around and the Buttons wil overflow.

private const string _firmwareWarning = "This operation will irreversibly modify the firmware of the radar.\nAre you sure you want to proceed?";

This string has a new line inserted, so there is no wrap around and the Buttons fit correctly.

private const string _firmwareWarning = "012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789";

Interestingly, this string is long enough to wrap around, but does NOT lead to the same problem as the first one...

private const string _firmwareWarning = "01234567 890123456 789012 3456789012 345678 9012345678 901234567 890123456 78901234567 890123456789012 3456789 01234 56789012 3456789";

...but this one once again does; the overflow width here is smaller than in the very first example.

Upon further examination, it seems that the TaskDialog area does not count whitespace on the end of an autowrapped line when determining its width, while the Button area does. For testing, you can try the following string variants:

private const string _slightOverflow  = "01234567890123456789012345678901jeklqrfjdsklvjefkljfkljfwlkefjldnv,mndv,ddwewrt4 5gregkl36789";
private const string _massiveOverflow = "01234567890123456789012345678901jeklqrfjdsklvjefkljfkljfwlkefjldnv,mndv,ddwewrt4      5gregkl36789";
private const string _noOverflow      = "01234567890123456789012345678901jeklqrfjdsklvjefkljfkljfwlkefjldnv,mndv,ddwewrt 45gregkl36789";
private const string _noOverflow      = "01234567890123456789012345678901jeklqrfjdsklvjefkljfkljfwlkefjldnv,mndv,ddwewrt 45 gregkl36789";
private const string _noOverflow      = "01234567890123456789012345678901jeklqrfjdsklvjefkljfkljfwlkefjldnv,mndv,ddwewrt4,5gregkl3456789";
private const string _noOverflow      = "01234567890123456789012345678901234567890123456789    \n012345678901234567890123456789";

The text tries to break between the "4" and the "5" near the end of the string. If there is no space between them, there is no issue (any other character can be inserted between them without problems). If there is a space before or after the "45", the text still breaks between them and there is no issue. However, as soon as you add a space between those two, it breaks on the space and buttons start to overflow - and as you add more spaces between the two numbers, the overflow gets bigger and bigger. Interestingly, if the text gets wrapped manually by '\n' (as in the very last example), there is also no issue, even when spaces are added on either side of the linebreak - only when wrapped automatically by Avalonia. I was not able to reproduce the issue with tabs, only with spaces - either the issue is with spaces in particular, or I wasn't able to get the exact length to trigger the issue with tabs.

@PremekTill PremekTill added the bug Something isn't working label Apr 20, 2024
@amwx
Copy link
Owner

amwx commented Apr 28, 2024

This feels like an issue with the text rendering system adding extra space where it shouldn't. Are you able to recreate this outside of a TaskDialog? It might be better to get a minimal sample (especially if you can do it without TaskDialog and just core Avalonia stuff) and open an issue upstream.

@amwx amwx closed this as not planned Won't fix, can't repro, duplicate, stale Aug 3, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants