Hello community!
I’d like to share a padding use case that’s causing a conflict. I’m creating utility classes for padding. One of these handles padding on the y-axis (left–right), and another handles padding on the x-axis (top–bottom). The problem is that if you configure only one of them in the property menu, the other is automatically set to 0. So if I have two classes—one for x and one for y—they end up conflicting. I’ll illustrate:
.spacing-p-y {
padding-left: 12px;
padding-right: 12px;
padding-top: 0px;
padding-bottom: 0px;
}
.spacing-p-x {
padding-left: 0px;
padding-right: 0px;
padding-top: 12px;
padding-bottom: 12px;
}
This is exactly what the padding property menu is doing, whether you assign x-y together or individually.
So, since the spacing-p-x class was applied last, my element’s left and right padding ends up being 0px instead of 12px.
You might think I could fix this in the CSS panel, but unfortunately there’s a bug here.
Imagine I assigned this property via CSS code. When I apply that class to the element, the CSS property does get the class’s code—but it remains marked as “unsaved.” In other words:
You can see the CSS label is gray, as if I hadn’t saved the change—even though I did. So if I remove the class, that CSS code stays behind, because the interface still thinks I’m editing it.
Furthermore, a class that sets padding-top and padding-bottom will simply overwrite all existing CSS code, rather than merging with the class that set padding-left and padding-right.
I hope the developers can address this issue.