Vue-form-generator: Issue with styling because of "wrapper"

[ChadTaljaardt]

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.

[lionel-bijaoui]

Sorry a wrapper div is necessary for most fields, since template must start with a single element.
Good luck !

[kikoseijo]

YEs, but you can't use generic class.
make your own Classes or don't give Wrapper
its toooooo generic class.

[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.

[kikoseijo]

Compatibility its key, rather than building a full CSS framework for it ill rather extend functionality by setting a value for main frameworks boostrap3 or 4 , etc.
Former for Laravel does it very clever in this aspect.

I ended using vue-json-schema after having this issue, because integrates well with element-ui

The wrapper right now breaks all apart.
Happy Days!

[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.

[freshway]

Maybe, it's too late to answer this and have solved, maybe you do not need it for another reason.
Even so, I leave my solution in case I can help someone.
I think you can create your "form wrapper class" and assign it globally to the form or you can add styleClasses in the fields that you need.

{
   "fields":[
      {
         "featured":false,
         "label":"Firstname",
         "disabled":false,
         "readonly":false,
         "model":"firstname",
         "type":"input",
         "inputType":"text",
         "styleClasses":"vfg-field-wrapper"
      }
   ]
}

With this css:

.vfg-field-wrapper .wrapper{
 /* changes that you need */
}