Do not reset unit to px when backspacing property value so textfield is empty and unit gets reset

When you are trying different values for a css property value with units it is quiet annoying that the unit gets reset to px when you hit backspace and the textfield is empty for a second.

If I have f.e. 5% and I backspace the 5 to type a 7, the % unit turns to px and I have to retype the whole value with unit (or pick the unit again) because the textfield was empty and got reset.

grafik

Hit backspace to remove the 5. The unit gets reset to px:

grafik

Type the 7 and the unit stays px:

grafik

This is espacially annoying if you realize it to late and begin to search the bug when you made multiple changes to a complex layout and everything looks broken suddenly.

A current workaround is to put a 0 in front of the value. As far as I can tell it stays there and isn’t removed automatically.

One solution would maybe be to write a zero when you backspace the value so it is empty (at least for numeric values). This zero value would also show up in the final css. F.e. width: 0%. If you really don’t want the property to be set at all just deactivate it completly by hitting the blue dot next to the property name. But I can not overlook the side effects.

@jan, I faced similar problems. Another workaround is to “select all” and replace the value instead of hitting the backspace and writing an new value. In this case, the unit is not reverted back to px. Hope this helps.

Hi @nadim, yes, I tried to adopt this habit. It’s a good workaround. Thanx for pointing out.

But it is still dangerous if you intuitivly hit backspace inbetween, the unit gets reset and your layout is broken if you don’t realize it directly. The zero upfront makes it a little safer, but is still dangerous. If you are on a tight schedule and hit just one backspace too much in a hurry the unit gets reset and it needs debugging to find this error in the worst case which cost lots of time depending on the complexity of the layout.