search

xamarin / Xamarin.Forms

Xamarin.Forms is no longer supported. Migrate your apps to .NET MAUI.
https://aka.ms/xamarin-upgrade
Other
5.64k stars 1.88k forks source link

[Bug] Cannot use CSS padding-left: 0 #14090

Open cabal95 opened 3 years ago

cabal95 commented 3 years ago

Description

This is somewhat related to #14088, though a different issue.

If you use the padding CSS field to set the padding of a view and then try to use padding-left it won't work because the PaddingLeftProperty in C# has a default value of 0 and thinks it's already that value. To my knowledge this directly affects:

It might also affect the font- fields, I'm not sure.

As a test to if this was fixable, I modified this line of code to pass along the SetValueFlags.RaiseOnEqual if fromStyle is true and that successfully let the property work as expected.

https://github.com/xamarin/Xamarin.Forms/blob/5.0.0/Xamarin.Forms.Core/BindableObject.cs#L374

Another possible solution would be to add a new property to BindableProperty (doesn't even need to be made available in the constructor) of RaiseOnEqual so a BindableProperty could be marked as "always raise". Then these virtual properties such as PaddingLeftProperty could mark themselves for this special processing.

A third possible solution would be to have the OnPaddingPropertyChanged method somehow update the actual values of PaddingLeftProperty without raising the events. While this could be done, it would probably require using a number of internal methods and as such wouldn't be something that 3rd parties could use if they have their own virtual properties.

Steps to Reproduce

Define the following CSS:

.box {
    padding: 20 20 20 20;
}

.box-left {
    padding-left: 0;
}

Then create a control to make use of that CSS:

<ContentView StyleClass="box,box-left" WidthRequest="100" HeightRequest="100" />

The box will have padding on all 4 sides, ignoring the padding-left: 0.

Expected Behavior

My padding-left: 0 should apply and override the padding: 20 20 20 20.

Actual Behavior

Any CSS value I try to set that happens to match the existing value, even in the case of a "virtual" property like PaddingLeftProperty, is ignored even though it should be applied.

Basic Information

Environment

Show/Hide Visual Studio info ``` Microsoft Visual Studio Professional 2019 Version 16.9.3 VisualStudio.16.Release/16.9.3+31129.286 Microsoft .NET Framework Version 4.8.04084 Installed Version: Professional Visual C++ 2019 00435-30012-51493-AA611 Microsoft Visual C++ 2019 ASP.NET and Web Tools 2019 16.9.693.2781 ASP.NET and Web Tools 2019 ASP.NET Core Razor Language Services 16.1.0.2112521+5741df381174d72f08e3632bb99f52e8635b6a1a Provides languages services for ASP.NET Core Razor. ASP.NET Web Frameworks and Tools 2019 16.9.693.2781 For additional information, visit https://www.asp.net/ Azure App Service Tools v3.0.0 16.9.693.2781 Azure App Service Tools v3.0.0 Azure Functions and Web Jobs Tools 16.9.693.2781 Azure Functions and Web Jobs Tools C# Tools 3.9.0-6.21160.10+59eedc33d35754759994155ea2f4e1012a9951e3 C# components used in the IDE. Depending on your project type and settings, a different version of the compiler may be used. Common Azure Tools 1.10 Provides common services for use by Azure Mobile Services and Microsoft Azure Tools. EclipseAndroidImporter 1.0 Import Android projects from Eclipse. Extensibility Message Bus 1.2.6 (master@34d6af2) Provides common messaging-based MEF services for loosely coupled Visual Studio extension components communication and integration. Generate GUID for Visual Studio 2012 1.0 Generate a variety of GUID values with a click or by assigning a chord to the menu command with the ability to change formats using a drop down in the Tools menu. GhostDoc 20.2.20270.0 Generate XML Comments from your code, maintain clean and up-to-date documentation, produce help documentation in multiple formats, use intelligent source code Spell Checker in Visual Studio. IntelliCode Extension 1.0 IntelliCode Visual Studio Extension Detailed Info Microsoft Azure Tools 2.9 Microsoft Azure Tools for Microsoft Visual Studio 2019 - v2.9.40218.1 Microsoft Continuous Delivery Tools for Visual Studio 0.4 Simplifying the configuration of Azure DevOps pipelines from within the Visual Studio IDE. Microsoft JVM Debugger 1.0 Provides support for connecting the Visual Studio debugger to JDWP compatible Java Virtual Machines Microsoft Library Manager 2.1.113+g422d40002e.RR Install client-side libraries easily to any web project Microsoft MI-Based Debugger 1.0 Provides support for connecting Visual Studio to MI compatible debuggers Microsoft Visual C++ Wizards 1.0 Microsoft Visual C++ Wizards Microsoft Visual Studio Tools for Containers 1.1 Develop, run, validate your ASP.NET Core applications in the target environment. F5 your application directly into a container with debugging, or CTRL + F5 to edit & refresh your app without having to rebuild the container. Microsoft Visual Studio VC Package 1.0 Microsoft Visual Studio VC Package Mono Debugging for Visual Studio 16.9.7 (df23ba6) Support for debugging Mono processes with Visual Studio. NuGet Package Manager 5.9.0 NuGet Package Manager in Visual Studio. For more information about NuGet, visit https://docs.nuget.org/ ProjectServicesPackage Extension 1.0 ProjectServicesPackage Visual Studio Extension Detailed Info SQL Server Data Tools 16.0.62103.10080 Microsoft SQL Server Data Tools TypeScript Tools 16.0.30201.2001 TypeScript Tools for Microsoft Visual Studio Visual Basic Tools 3.9.0-6.21160.10+59eedc33d35754759994155ea2f4e1012a9951e3 Visual Basic components used in the IDE. Depending on your project type and settings, a different version of the compiler may be used. Visual C++ for Cross Platform Mobil 16.0.31025.194 Visual C++ for Cross Platform Mobile Development (Android) Visual F# Tools 16.9.0-beta.21102.9+7ce7132f1459095e635194d09d6f73265352029a Microsoft Visual F# Tools Visual Studio Code Debug Adapter Host Package 1.0 Interop layer for hosting Visual Studio Code debug adapters in Visual Studio Visual Studio Container Tools Extensions 1.0 View, manage, and diagnose containers within Visual Studio. Visual Studio Spell Check Everywhere VSSpellCheckEverywhere An extension that enables spell checking within any Visual Studio file editor or tool window that uses WPF text boxes. https://GitHub.com/EWSoftware/VSSpellChecker Visual Studio Spell Checker VSSpellChecker An editor extension that checks the spelling of comments, strings, and plain text as you type or interactively with tool windows. https://GitHub.com/EWSoftware/VSSpellChecker Visual Studio Tools for Containers 1.0 Visual Studio Tools for Containers VisualStudio.DeviceLog 1.0 Information about my package VisualStudio.Foo 1.0 Information about my package VisualStudio.Mac 1.0 Mac Extension for Visual Studio Xamarin 16.9.000.273 (d16-9@1bba9e0) Visual Studio extension to enable development for Xamarin.iOS and Xamarin.Android. Xamarin Designer 16.9.0.316 (remotes/origin/d16-9@fdbf64026) Visual Studio extension to enable Xamarin Designer tools in Visual Studio. Xamarin Templates 16.9.68 (8e9b569) Templates for building iOS, Android, and Windows apps with Xamarin and Xamarin.Forms. Xamarin.Android SDK 11.2.2.1 (d16-9/877f572) Xamarin.Android Reference Assemblies and MSBuild support. Mono: 5e9cb6d Java.Interop: xamarin/java.interop/d16-9@54f8c24 ProGuard: Guardsquare/proguard/v7.0.1@912d149 SQLite: xamarin/sqlite/3.34.1@daff8f4 Xamarin.Android Tools: xamarin/xamarin-android-tools/d16-9@d210f11 Xamarin.iOS and Xamarin.Mac SDK 14.14.2.5 (3836759d4) Xamarin.iOS and Xamarin.Mac Reference Assemblies and MSBuild support. ```

Build Logs

Screenshots

Screenshot_1617234109

Reproduction Link

CssDemo2.zip

Workaround

A nasty workaround is to force the value to be something else first. Since you can't have two padding-left values in the same declaration, you have to do something like:

.box {
    padding: 20 20 20 20;
}

.box-left {
    padding-left: 1;
}
.box-left {
    padding-left: 0;
}
rachelkang commented 3 years ago

Hi, @cabal95 - thanks for submitting this issue. I'm able to repro, but I believe the reason for this behavior is that XF doesn't support specificity and specifity overrides as per our docs. It is strange that the double override works properly though... @StephaneDelcroix might be able to elaborate more on this if you have more questions

In the meantime, you can avoid the need for overrides by applying a single style like:

.padtest-a {
     padding: 20 20 20 0;
}
cabal95 commented 3 years ago

Unfortunately, overrides is the whole reason we would use CSS styles instead of just hard coding everything.

I believe the actual issue is that the values of PaddingLeftProperty and PaddingProperty do not get synchronized together even though they effect the same value under the hood. The PaddingLeftProperty is defined with a default value of "0". But if you set the PaddingProperty then the true value of PaddingLeft becomes "20" even though PaddingLeftProperty thinks it's still "0". So when you try to set "PaddingLeft" to "0" the logic says "If new value == current value then do nothing".

Basically, the problem is a sync issue with PaddingLeftProperty and PaddingProperty. When you PaddingProperty then PaddingLeftProperty does not get updated. That is why the double override works. You are intentionally changing it to "1" and then changing it back to "0" so it realizes the value is actually changing, even if it is out of sync with the actual value.

Also, the only mention of "specificity not supported" I can find the docs is in regards to selectors. Meaning XF doesn't recognize that Label.my-class is more specific and thus higher priority than just .my-class. But the docs do clearly state that the last matching selector takes precedence so I think my original test should indeed work according to the docs.

That said, I do understand if this gets classified as "not fixable (without causing breaking changes)", but in that case I believe the docs should be updated to note that unexpected results can happen when mixing "padding" and "padding-left/top/right/bottom" values.