VFG CSS overrides Bootstrap3.x classes, limiting form capabilities

[Stephen9s]

Hello,

For this issue, I refer to https://jsfiddle.net/1cmf4eur/1/ for the desired effect and to https://jsfiddle.net/awon7otp/1/ to observe the conflicts.

For those wishing to implement multi-column forms, you could eliminate vfg.css or vfg-core.css, but doing so means you'd forgo '.form-group.error' and '.form-group.error errors', 'span.help' and '.helper classes', '.form-group.required', and more.

I feel that vfg.css/vfg-core.css implements Bootstrap-like styling, but ultimately is not as Bootstrap-friendly as it could be.

What do you think about further de-coupling the VFG-specific CSS styling (error, help, required, etc)?

[zoul0813]

I think we should continue using the bootstrap compatible classes, but make the rest of the markup/classes more bootstrap compatible. This will allow you to not use the VFG CSS and rely entirely on Bootstrap for styling, but if you'd prefer not to use bootstrap the VFG CSS can provide all the necessary default styling as it always has.

The end result here is that you can eliminate the VFG CSS if your site already uses bootstrap and increase performance and reduce overhead by not loading "yet another stylesheet".

[dflock]

Agree with @zoul0813. Am currently using vfg in a new project with Bootstrap 4 and this causes problems there too - you need to override a load of the CSS from vfg that's baked into formGenerator.vue, or take it out and use your custom version of vfg.

Would be ideal if the classes were totally configurable and there was no CSS baked into vfg, but in the meantime, just having no baked in CSS (or the very minimum) - and leave the clases alone, would be an improvement, I think.

[icebob]

Can it solve the layout problem? https://adamwathan.me/renderless-components-in-vuejs/

[k8n]

In the very least, perhaps, formGroup.vue could wrap it's SCSS in .vue-form-generator { } just like formGenerator.vue does?