RadDataForm style bugs when validation message appears

[andresilva-cc]

Please, provide the details below:

Tell us about the problem

I'm using RadDataForm with NativeScript-Vue and I customized its style via SCSS. When a validation message appears (like in the first field) the borders are gone. If I move the border properties from DataFormEditorCore to PropertyEditor, it works, but the validation message is inside the border too. What I want is to show the border around the field, but the validation message below it.

Screenshot

Which platform(s) does your issue occur on?

Android (didn't test on iOS yet)

Please provide the following version numbers that your issue occurs with:

• Progress NativeScript UI plugin version: "nativescript-ui-dataform": "^6.1.0",
• CLI: 6.1.2
• Cross-platform modules: ^6.5.1
• Runtime(s): 6.5.0 (both)

Please tell us how to recreate the issue in as much detail as possible.

1. Create a RadDataForm with a metadata object (providing for each property the name, hintText, editor and validators)
2. Apply the styles in the code section below

Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.

RadDataForm {
  margin: 0;
  padding: 0;
}

DataFormEditorLabel {
  visibility: hidden;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
}

DataFormEditorCore {
  placeholder-color: #b8b8b8;
  padding: 5 10;
  border-width: 1;
  border-color: #b8b8b8;
  margin: 3 0;
  font-size: 16;
  text-align: left;
}

PropertyEditor {
  margin: 0;
  padding: 0;
}

[andresilva-cc]

Does anyone know a workaround? I'm developing this project for a client and I can't show it to him with this bug.

[andresilva-cc]

I can confirm that this issue does not happen on a real device. Tested on Samsung Galaxy A50 (SM-A505GT) running Android 10.

I'm using Genymtion and I tried in a new device (Google Nexus 5X with Android 7.1) and the issue also does not happen. It was happening in Google Nexus 5X with Android 5.1.