[RadDataForm] Nativescript-vue CSS styling

[ahmed-shahrour]

Tell us about the problem

The CSS styling for RadDataForm does not work for Vue as it does for Core or Angular. I have to explicitly reveal inner components in order to use CSS as opposed to just simply using CSS.

Which platform(s) does your issue occur on?

Both

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

• Progress NativeScript UI plugin version: 5.0.0
• CLI: 6.0.3
• Cross-platform modules: 6.0.1
• Runtime(s): 6.0.1

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

N/A

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

<template>
  <RadDataForm :source="form" :metadata="formMetaData">
     <TKEntityProperty v-tkDataFormProperty name="quantity">
       <TKPropertyEditor v-tkEntityPropertyEditor type="List">
           <TKPropertyEditorStyle v-tkPropertyEditorStyle></TKPropertyEditorStyle>
        </TKPropertyEditor>
    </TKEntityProperty>
  </RadDataForm>
</template>

<script>
export default {
  data() {
    return {
      form: {
        quantity: "",
      },
      formMetaData: {
        {
          name: "quantity",
          displayName: "Quantity Achieved",
          editor: "Number"
        }
     }
   }
}

<style scoped>
PropertyEditor {
  background-color: #00bcd4;
  color: #303f9f;
  border-color: #303f9f;
  border-width: 5;
  border-radius: 5;
  margin: 10;
  padding: 10;
  font-size: 14;
}
</style>

[tsonevn]

Hi @ahmadshahrour951, I tested the given CSS with our sample app, however, was unable to recreate such a problem. Can you send us a sample project, that can be used for recreating the problem?

[CarissaHurt]

Hey @tsonevn, I was having the same issue, so I've created a sample in the playground for you, here is a link.

[jdavidbakr]

Any update on this? I've just started using NativeScript with Vue and have run into this issue. Is it not possible to style the RadDataForm in Vue right now?

[mcgouganp]

I just tried out version 6.0.1-next-2019-11-22-123116-01 and it still seems to exhibit this very serious fault, which is disappointing to say the least.

[fgutteridge]

This is most definitely still an issue in NS v6.3+. I guess this is just one of those bugs that will be ignored for the NS-Vue community?

[NiklasLimberg]

So this has been assigned the severity high label about 7 months ago and it's still a problem in version 6.0.0. what is this? Is there at least a workaround?

[krauser36]

Hi! Any update of this?

[hraynaud]

I can style the form container but the not the PropertyEditor or any other components as described here: https://docs.nativescript.org/ui/components/dataform/dataform-styling

[msn444]

I too am unable to apply styling to any element of RadDataForm in NS-vue. I can't see how it exists as a useful product in this state.