SOLVED: Borders don't work when using the same CSS variable value for all 4 border-width sides

Browser: Safari 16.5
OS: macOS
Bricks: at least 1.8 and 1.8.1

In the builder, when I enter a CSS variable value into the border-width section of the builder for all 4 sides, it shows properly in the builder, but renders as “border: 0” on the front-end and, obviously, doesn’t show the border.

I can use variables for 1, 2, or 3 sides of the border just fine, but when I add the 4th side, the problem occurs. If each variable is different, it works fine on all 4 sides, so only seems to be an issue when you’re using the same variable on all 4 sides.

Hope this makes sense!

1 Like

Could be something unique to your site, are you able to replicate the problem on a different Bricks site?

I’m not coming across the same issue. Are there more steps to recreate the problem?

Hey Michael,

thanks for your report.

Like David I am not able to reproduce the issue. Are you able to reproduce the issue on a fresh site? Can you provide some more info about your specific site / setup or how to reproduce it?

Best,

André

I’ve tried it on my normal installations, as well as the Try Bricksbuilder Link and the same thing happens.

In the attached Video Link, I added the variable to the padding fields also, which worked fine, so it seems to only happen on the border width fields. As you’ll see, when I inspect the element, it shows the variable, the padding values, but the border is set to “border: 0;”.

The “Try Bricks” link is v1.8, but it also happens on my other installs, which are all v1.8.1. I also primarily work in Safari, but I did test all of this in Firefox, which seems to have the same issue.

@wplit and @aslotta

Just a follow up on my previous comment since I realized I didn’t tag anyone: The video link expired, so here’s an updated video link showing the issue, which is still occurring on any install I try it with, including the Try Bricksbuilder link. I wanted to make sure the exact steps were shown in case it’s specific to the exact way I’m doing things.

Thanks for any insights.

Hey Michael,

thanks for the video. I am still not able to reproduce the issue:

Please send some credentials to a site where I can see the issue in action to help@bricksbuilder.io.

Best,

André

@aslotta, Hmm, it doesn’t work for me for some reason. I’ve tried my own installs, the Try Bricksbuilder install, different browsers, etc… and it doesn’t work. The variable works for all other fields and works if I just put it in up to 3 sides of the border, but if I put the variable in all 4 border sides, it doesn’t show on the frontend. It’s really weird because it shows on the backend fine. Oh well, I’m not going to waste anymore time on this, I just use custom classes for borders and that alleviates the issue. Thanks for looking into it though!

I am having the same weird issue and it driving me nuts. Even with a custom class it wont work. Have you been able to find a solution?

Hey John,
Would you be so kind as to provide a live link and a screencast using https://jam.dev showing and explaining what’s happening?

I’d love to, but Jam isn’t generating a video for me…
But, you can see the error here for example: Catering – Das Wunsch Buffet


Inside the builder it looks like this

Hi Christoph,
Thanks so much! Strangely enough, I can replicate the issue now, and I’ve added it to the bug tracker :v:

Oh man, finally… I’m glad someone was finally able to replicate this. I just gave up on it :smirk:

Hi guys,
We cannot replicate the issue with Bricks 1.9.7.1 - can you please try again using the latest version?

Just tried it on the site mentioned above.
Still no borders on the frontend…

Odd… Would you be so kind as to send temporary login credentials and a link to this thread to help@bricksbuilder.io using the email address you used during the purchase? @Aizbaer

Sure, mail just was just sent

Hi @Aizbaer,
Thanks so much for the login credentials!

We believe we have found the cause of the problem. It is most likely due to the PHP version (7.4). From PHP 8 upwards, everything works as it should.

I can now reproduce the problem locally without any problems. I have also tested your installation locally and can confirm that it works with PHP 8.x as well. We will implement a fix for this in the next version, but it can’t hurt to update to PHP 8, as PHP 7.4 is already a bit outdated.

Please check your PHP version and update to PHP 8.x @msguerra74 @johnpixle.

PS: When I was able to reproduce the problem, our dev server was also running PHP 7.4 - shortly afterwards we updated to PHP 8, so that we could no longer reproduce the problem. But you have to come up with that first… :exploding_head: :smiley:

Hi guys,

We’ve fixed this issue in Bricks 1.9.8 beta, now available as a manual download in your account (see changelog).

Please let us know if you are still experiencing issues.

As with any beta release, please do not use it on a production or live website. It is only meant for testing in a local or staging environment.