New control issues with numbers and dimensions in the CSS

Tangible Blocks
#1

I seem to be having issues with the inputs with the new controls with anything to do with numbers.

For example, I have tried both of these controls:

with input: 250px

with input: 250

And the style as
li.list-item {
width: $button_width;
}

— as a number field, I tried “px” right after the “$button_width”, and with a space - didn’t work - the text field works with “#” when picking a color… so… I was hoping units could be read.

And, I can’t get dimensions to work at all, this is what I did with the controls:

And CSS:
li.list-item {
padding: $button_padding;
}

…any ideas?

Oh, and I use Beaver Builder.

#2

I just tested this out myself and it looks like the value of the control variable in the style tab seems to be getting rendered with quotes around it, which would explain why it wouldn’t work.

image

Seems like a bug to me. I’ll send out the smoke signal.

1 Like
#3

Any updates on this…?

#4

I believe this has been resolved in version 3.1.7 in the changelog item “Style variables: Improve variable type detection.” Want to give it a try and confirm whether that’s working for you now?

2 Likes
#5

It is not working. :frowning:

#6

Hi @mburke , If you have time maybe you can try this one.

width:$insert_image_size#{$insert_image_unit};

or with this,

width:$insert_image_size#{px};

#7

It’s working for me now. I’ve got a really simple template:

<div class="dimension-style">This is some text</div>

With some stuff in the style that uses $dimensions_control to refer to the control value:

.dimension-style {
  color: white;
  background-color: blue;
  padding: $dimensions_control;
}

In the Controls tab, I have a regular dimensions control copied directly from the docs that I’ve named dimensions_control. You can see that it’s getting displayed as expected:

image
image999×458 18.3 KB

You can already see above that the padding is getting applied, but I can also confirm if I inspect it that the control value is now being rendered without quotes, which is why it’s now working when it wasn’t before. (Edit: ignore the actual values here that don’t match up with the controls above, I was working in multiple tabs and didn’t refresh the page before taking the screenshot, but you get the idea)

image
image920×168 12 KB

There’s some new syntax that’s being introduced that will allow people to refer to individual values when a control contains multiple values. For example, in the case of the dimension control, we might want to refer just to the top dimension or just the selected unit instead of referring to the whole value as I’ve done here with $dimensions_control. That should be added to the docs in the coming days, but from your original post, it doesn’t sound like that’s your issue.

It sounds like you have a number control and you’re trying to append something (like “px”) to the end of the value of your number variable. That’s not really an L&L question and is more of a SASS question. This article seems to suggest that you can just append stuff with +, but my area of expertise is L&L, not SASS, so maybe someone else can chime in with recommendations there. But at the very least I can confirm that rendering new control values in SASS using $my_control_name seems to be working as expected now.