Issue with styling because of "wrapper"

Hello,

I’m having a few issues with the styling of this plugin because of “wrapper”.

I’m incorporating this plugin into my website and this is what the issue looks like:

There is a big space between the name of the field and the component “textbox”

{
   "fields":[
      {
         "featured":false,
         "label":"Firstname",
         "disabled":false,
         "readonly":false,
         "model":"firstname",
         "type":"input",
         "inputType":"text"
      },
      {
         "featured":false,
         "label":"Second Name",
         "disabled":false,
         "readonly":false,
         "model":"second-name",
         "type":"input",
         "inputType":"text"
      },
      {
         "rows":4,
         "hint":"Max 500 characters",
         "max":500,
         "label":"Description",
         "placeholder":"",
         "model":"description",
         "type":"textArea"
      }
   ]
}

Here is a picture of the error css

I am using the “Uplon” theme from themeforest.

[sergiocastrovale]

I agree with this - had to restyle my wrapper class myself because of it. At least prefix all classes with “vfg-” - that would allow for easier styling and would definitely solve these issues.

[zoul0813]

I think we can probably provide some more advanced form level options, which would allow devs to override or amend their own classes at every level of the hierarchy. We could also prefix all the internal classes with something like “vfg-“ so there are no conflicts with popular frameworks such as bootstrap.

For example a “wrapperClass” property that defaults to “vfg-wrapper”, but can be changed to anything.