SOLVED: "rem" property doesn't accept decimal points for margin and padding

Bugs
1

Bricks Version: 1.2
Browser: Chrome 90.0.4430.212 (Official Build) (64-bit)
OS: Windows

When you try to set decimal points for the “rem” property under margin/padding, it doesn’t work. Only when it’s for font size, which is great.

It only works when I type for eg. root {margin-bottom: 1.5rem;} under the custom CSS section. Might be intended, but just wanted to report this.

Thanks!

2

“%” Decimal point is not supported either…

3

Yea. And I realised something like this clamp(2.4rem, calc(2.4rem + ((1vw - 0.48rem) * 2.2222)), 4rem) works for font sizes, but not for margin and padding too. Can be easily done with custom code, but would be good if it works for every CSS property. Will greatly speed up designing and responsiveness.

4

@vancewong Great catch. Will be fixed in the next update!

2 Likes
5

Decimal units and unit dropdown (while still being able to directly type in any custom unit or even functions like “clamp()”, etc… What do you think?

Bricks 1.2.1 - Control Unit Dropdown

5 Likes
6

@thomas yes, this looks good! So I imagine we’ll just need to add the clamp code in the unit field like currently, yes?

This is perfect. Thank you!

1 Like
7

Things to consider with the new prototype:

  1. “type in any unit and decimal values” just to make sure I can simply type “23px” and it will change both value box input to “23” and unit box input to “px”? If so, does it accept only “.” as a separator or also “,” (this is standard for some European countries). If “,” is not supported (logical based on how CSS works) does it convert it to “.” or simply breaks?
  2. For some people it still may not be obvious that this is an input field, just because they get the dropdown options. This is where tooltip or especially onboarding would be helpful.
  3. Even though they may realize this is an input field, it isn’t obvious what kind of inputs will it accept. So to know that one needs to simply test it. It would save some time if there was a tooltip or onboarding just telling me that.
  4. What does “-” stand for? Is it simply “inherit”? If so, then it would be more straightforward to name it that way.
  5. How does this input field handle case-based typos like “PX”, “pX” or “Px” instead of “px”. Does it:
    a) transform them to lowercase when passed to CSS (“pX” stays in input but in CSS it is “px”);
    b) autocorrect them inside input (“px” in input and CSS);
    c) show a general error about the typo (e.x. “Wrong input!”);
    d) show a proper error about the typo (e.x. “The input must be all lowercase!”);
    e) do nothing and breaks/doesn’t work.
  6. To continue on with 5. if 1. is true and you can type “23px” what happens when someone types “23 px”? Options a) - e) are like in 5.
  7. If e.x. “px” is already typed in the input field, (how) does it indicate that fact on the dropdown list?
    a) Not at all;
    b) highlights it;
    c) disables the option.
  8. If I can simply type “clamp(x, y, z)” then the input may not be wide enough to fit the whole text in making it harder to revisit the setting.
  9. To continue with 8. if 1. is true then will it realize that there is clamp() or other function like calc() used inside? For example if “23px” would normally populate both inputs, won’t it break or populate the field with the first (“23px”) value when clamp(23px, 30px, 45px) is used?
2 Likes
8

The dropdown solution looks great @thomas - Can you include this in Separator too please

9

Kudos to you for the knowledge you have to be able to point out all this .
My concerns about being free to write anything on those fields is merely the fact that i could forget i can, especially with no obvious syntax shown for the clamp function. I know that if you do a quick search for CSS Units you end up with a list of possible units you can use, and i truly love this hidden pro only feature of the builder, but as the project grows, chances you lose this informations over time increase, so having a drop down and maybe a tooltip that reminds that you could insert complex functions would be awesome.
Getting to know the handling of all the points you showed here would be super interesting too.

10

Great, great questions, @Matiasko! Very thoughtful. Love it! I am going to answer them based on Bricks 1.2.1:

In Bricks 1.2.1 you’ll be able to type in any value & unit into the “number” input field. Bricks will extract the unit when the input loses focus (= blur) or when you press “Enter”. Spaces are automatically removed. The unit is transformed to all lowercase.

The selected/active unit is highlighted in the unit dropdown (same as all other dropdowns like font-family, etc.)

“px” is the default unit. So when typing in “px” it’ll remove the unit, as it’s already set in the background.

“-” stands for unitless. Mainly useful for settings like line-height.

I agree, there currently isn’t really enough space to display entire CSS functions like clamp(). Due to the fact that we can’t simply position the unit absolute, I don’t have a solution for it. You have to use the “unit” field to enter your entire CSS function.

We’ll go over and cover this somewhat complex control in a new “Getting Started” we are currently preparing. Adding a tooltip to every control with a unit seems like overkill. Once you know how it works, you know it.

11

I can’t let that go I’m afraid, as I couldn’t agree less!
This is the voice of someone who lives in the builder and knows it inside out ( obviously ).
For people like me who only dip in occasionally I increasingly find that I very quickly forget what I used to know. This is probably a combination of age, Rapid development and things moving/changing, non obvious locations and the sheer quantity of things you need to remember.
If you only build/maintain a couple of sites then after the initial build I find every time I return to make a change is a challenge as I’ll have forgotten some of the finer details. So I rely on tooltips to remind me what various icons actually do. Sometimes just a top level reminder is enough, say “Enter any css unit here”, other times more detailed help may be needed. Perhaps have explanations for each unit, in this example, for items in the drop down. E.g. for this case I have no idea what a “clamp” is, nor many of the other units for that matter, so would appreciate a small link or tooltip.
But I guess it depends on your target audience. For the Oxygen types they probably already know CSS etc so have no need, but for Elementor escapees it may be more useful.
Maybe there could be a “Pro” switch to turn detailed tooltips on and off?

12

Thanks so much for your feedback. I had hoped once a user has watched the video explaining this feature, it’ll suffice. But I now better understand, that might not be the case.

It’s very hard to strike the right balance of not overloading the already feature-packed controls, but at the same time, offering enough guidance for every user.

Let’s go with the tooltip approach (which will appear when you hover over the unit field with your mouse):
Bricks 1.2.1 - Unit tooltip

I think providing an explanation for every unit inside the builder might be somewhat outside of its scope. Personally, I find the MDN docs very good to read up on such topics: CSS values and units - Learn web development | MDN

It’s totally valid and most often perfectly fine to stick to the default “px” (pixel) unit. It’s what I do 98% of the time.

13

Seems good to me. I only mentioned the full list tooltips to demonstrate the depth of ignorance you are having to deal with here!

Having thought about this some more - the general tooltips issue - there is another factor for me.
I use the mouse to navigate around ( I know you use shortcuts but I can never remember them ). So I tend to rely on hovering over things to see if they can be interacted with. Its a useful indicator when the tooltip pops up.