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};