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

Fluent controls don't respect BorderThickness set to 0 #7621

Closed
robloo opened this issue Dec 8, 2021 · 5 comments · Fixed by #16482
Closed

Fluent controls don't respect BorderThickness set to 0 #7621

robloo opened this issue Dec 8, 2021 · 5 comments · Fixed by #16482
Assignees
Labels
difficulty/challenging 🤯 Categorizes an issue for which the difficulty level is reachable with internals understanding kind/bug Something isn't working project/styling 👔 Categorizes an issue or PR as relevant to element styling

Comments

@robloo
Copy link
Contributor

robloo commented Dec 8, 2021

Current behavior

Using the Fluent version 2 Style on TextBox, it is impossible to set BorderThickness to zero and have the border disappear. Consider the following code:

        <TextBox
            x:Name="SettingsSidePaneTitleTextBox"
            PlaceholderText="Title"
            Background="Transparent"
            BorderThickness="0"
            HorizontalAlignment="Stretch"
            VerticalAlignment="Top"
            Margin="5" />

Produces (on Android):

Unfocused
image

Keyboard Focused

image

Expected behavior

UWP:

Unfocused
image

Keyboard Focused
image

How to reproduce it (as minimally and precisely as possible)

See the repro app:
TestApp.zip

Workaround

None

Works on UWP/WinUI

Yes

Environment

Uno.UI / Uno.UI.WebAssembly / Uno.UI.Skia

NuGet package version(s)

4.0.9

Affected platforms

Android

IDE

Visual Studio 2022

IDE version

No response

Relevant plugins

No response

Anything else we need to know?

No response

@robloo robloo added difficulty/tbd Categorizes an issue for which the difficulty level needs to be defined. kind/bug Something isn't working triage/untriaged Indicates an issue requires triaging or verification labels Dec 8, 2021
@robloo
Copy link
Contributor Author

robloo commented Dec 10, 2021

@MartinZikmund You implemented the new Fluent v2 borders for Android I believe. Do you expect this is an easy fix? Can you point in the right direction?

@MartinZikmund
Copy link
Member

Workaround here would be to create a custom Style for Button to hide the border, but proper fix will require adjusting the customized template. I can look into this after I finish my current task

@robloo
Copy link
Contributor Author

robloo commented Dec 10, 2021

No rush, I was under the impression the linear gradient borders required some larger work-arounds to get working. If it was just some tweaks to the template this should be quickly solvable.

@MartinZikmund
Copy link
Member

We were (and still are) aiming for a full workaround-less implementation for linear gradient borders (Android, iOS, macOS and Skia are actually basically ready in this regard), but getting it working on WASM is super tricky, as gradients don't play nice with corner radius, so that's why we went with this simpler solution for now until we find a reliable solution on web

@MartinZikmund MartinZikmund self-assigned this Dec 11, 2021
@MartinZikmund MartinZikmund added difficulty/starter 🚀 Categorizes an issue for which the difficulty level is reachable by newcomers project/styling 👔 Categorizes an issue or PR as relevant to element styling and removed difficulty/tbd Categorizes an issue for which the difficulty level needs to be defined. triage/untriaged Indicates an issue requires triaging or verification labels Dec 11, 2021
@MartinZikmund MartinZikmund added difficulty/challenging 🤯 Categorizes an issue for which the difficulty level is reachable with internals understanding and removed difficulty/starter 🚀 Categorizes an issue for which the difficulty level is reachable by newcomers labels Jul 19, 2023
@MartinZikmund MartinZikmund changed the title Fluent v2 TextBox doesn't respect BorderThickness set to Zero Fluent controls don't respect BorderThickness set to 0 Sep 5, 2023
@MartinZikmund
Copy link
Member

MartinZikmund commented Sep 5, 2023

This applies to other controls like Button too (#13348)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
difficulty/challenging 🤯 Categorizes an issue for which the difficulty level is reachable with internals understanding kind/bug Something isn't working project/styling 👔 Categorizes an issue or PR as relevant to element styling
Projects
None yet
2 participants