[Bug] Cannot use CSS padding-left: 0

[cabal95]

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:

• padding-left
• padding-right
• padding-top
• padding-bottom
• margin-left
• margin-right
• margin-top
• margin-bottom

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

• Version with issue: 5.0.0
• Last known good version: n/a (possibly all versions)
• Platform Target Frameworks:
  • iOS: 14.4
  • Android: API 30
  • UWP:
• Android Support Library / AndroidX Version:
• NuGet Packages:
• Affected Devices: iOS, Android - probably all.

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

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]

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]

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.