Padding x and y conflict

Ask us anything
1

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:

image
image433×399 9.56 KB

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.

2

You shouldn’t be using custom CSS this much anyway. What exactly you want to hear? You’re using CSS in a wrong way and it’s overwriting your previous class. What exactly is the issue here you’re asking about? You’re doing this entirely wrong, use WeWeb, not code.

3

Hey, Broberto. Hope you doing well.

As I mentioned, I used the menu padding at first, then tried to use CSS code. Haven’t succeed in any of them.

4

To simplify, a simple solution would be for the WeWeb panel to just not assign 0 to the measures I’m not defining.

5

It doesn’t assign anything. My best guess is that you set up something in a wrong way. I’ve never ever in years with WeWeb had this issue.