Bug: perspective css property border-left, border-right accepted in preview but not in browser

I have two adjacent dashed boxes and to prevent the double border where the two boxes are adjacent I have used a border-left: 0 property to prevent the double border, when I click play in the previewer in Ignition the border is correctly shown but in the browser the property is not passed.

preview in play mode with single dashed line:
border_1

browser view with double dashed line:
border_2

Browser might need to refresh with cache, css get stored there often.
(ctrl + F5)

Thank you but I used incognito mode and the same happens so I excluded this possibility

can you show the inspector in the browser the things that needs the border?

The box with the border-left is highlighted in blue, the property border-left in the css is not passed:

Alright, now could you show me where you declare the borderstyles?

I insert the key border-left in the style editor as a key value pair:

Could you try moving it to the bottom of the style list, the ordering matters since the bordersyle could overwrite the left style.
(or atleast below borderwidth in this case)

Nvm it seems the custom css style names of igntion are messing up the style;
it will work if you make the other border styles also custom:
this worked for me
image

I put it as last and the result is the same, notice I tried also the combination border-left:0 and border-right:0 for two adjacent boxes (thus having no border at all between the two) and the behavior is the same.
Notice when I click the style editor the property is not there in the popup window as if it weren’t recognized.

Were you able to overcome the issue in your tries? I tried currently as below and the issue is still there:

border

Changing the names worked for me:

borderStyle => border-style
borderColor => border-color
borderWidth => border-width

Thank you, it solved the problem.
Just for reference below my working styles:

solution

1 Like