vue-form-generator icon indicating copy to clipboard operation
vue-form-generator copied to clipboard

VFG CSS overrides Bootstrap3.x classes, limiting form capabilities

Open Stephen9s opened this issue 7 years ago • 4 comments

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)?

Stephen9s avatar Feb 04 '18 18:02 Stephen9s

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

zoul0813 avatar Feb 05 '18 13:02 zoul0813

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.

dflock avatar Feb 08 '18 22:02 dflock

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

icebob avatar Mar 26 '18 09:03 icebob

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

k8n avatar Jan 09 '19 22:01 k8n