Problem with CSS loading

Help & Support
1

Hi,

I have a CSS with a style,

/* Text-Field */
.text-field {
    padding: 1%;
}

input:focus ~ .label,
input:not(:focus):valid ~ .label{
    position: absolute;
    top: 2.5%;
    bottom: 10px;
    left: 20px;
    font-size: 15px;
    opacity: 1;
}

.inputText {
    font-size: 14px;
    width:100%x;
    height: 20px;
}

.label {
    position: absolute;
    pointer-events: none;
    left: 2%;
    top: 8%;
    transition: 0.2s ease all;
    opacity: 0.5;
}

When I save and run the application, I do not get the expected result. After code inspect, I found that the CSS was not properly loaded.

I refreshed the playcanvas editor and found the CSS modified.

/* Text-Field *//*
.text-field {
    padding: 1%;
}/

input:focus ~ .label,
input:not(:focus):valid ~ .label{
    position: absolute;
    top: 2.5%;
    bottom: 10px;
    left: 20px;
    font-size: 15px;
    opacity: 1;
}

.inputText {
    font-size: 14px;
    width:100%x;
    height: 20px;
}

.label {
    position: absolute;
    pointer-events: none;
    left: 2%;
    top: 8%;
    transition: 0.2s ease all;
    opacity: 0.5;
}

After I correct and save, yet I get some garbled characters. Would be great if anybody could help me out.
Thanks.

2

In .inputText you have width:100%x;, that x need to go.
Regarding weird characters added after save, that’s not cool, seems like a bug in real-time coding part…

3

Thanks max.
I removed that ‘x’. Now I didn’t get any garbled text. Working fine.
Perhaps, in some situations I have found an extra ‘}’ at the end of the script or style file. Didn’t face any major problem though.

4

Hi max,

I am getting the issue again. The above code when saved I get,

/* Text-Field */
.text-field {
    padding: 1%;
}

input:focus  ..label,
input:not(:focus):valid .-.label{
    position: absolute;
    top: 2.5%;
    bottom: 10px;
    left: 20px;
    font-size: 15px;
    opacity: 1;
}

.inputText {
    font-size: 14px;
    width: 100%;
    height: 20px;
}
..label {
    position: absolute;
    pointer-events: none;
    left: 2%;
    top: 8%;
    transition: 0.2s ease all;
    opacity: 0.5;
}

The label class gets changed to something else. Appreciate your help.

5

I am also facing same issue with javascript code as well.
When I save and reload, I find some garbled text appearing at some places of script.

6

It seems that some times the real-time collaborative editor behaves a bit weirdly. We will have a look at it.