Adding vfg.css breaks styleClasses

[DelfsEngineering]

When I add the <style src="vue-form-generator/dist/vfg.css"> to my component that wraps VFG I am finding that the styleClasses breaks.

I suspect this is related to the css order and that styleClasses is being added first? Is there ea proper way to include it?

[lionel-bijaoui]

Can you provide a fiddle that reproduce this problem ? Thanks !

[lionel-bijaoui]

One possibility, it may be related to the specificity of you class. When you inspect the element, does your custom class are before those of VFG ? If this is the case, you may want to augment the specificity of your custom class by adding .vue-form-generator .form-control to your CSS.

/* before */
.my-class{
    background-color: red;
}

/* after */
.vue-form-generator .form-control.my-class{
    background-color: red;
}

[DelfsEngineering]

It doesn't exist in the fiddle, So I guess the real question: Where is the proper place to add <script>...vfg.css</script> ?

If I add it to my .vue component that calls vfg, the css appear to overwrite my bootstrap.css and the col-md-6 etc widths get corrupted.

my bootstrap.css is added to my index.html file

[lionel-bijaoui]

Have you tried my proposal ? Have you inspected your code ? What's your level in CSS ? It may be related to the order in which you import it. In this fiddle, I added bootstrap along vfg.css and nothing is broken. Lastly, vfg.css doesn't contain col-md-6 and everything is under the .vue-form-generator so nothing outside should be contaminated.

Sorry, but I'm going to close the issue. If you provide a fiddle or something with an example of this corruption that we can test then I will reopen. Because without this, it could be anything and maybe unrelated to VFG. I simply can't help you with the level of information you provided.

[DelfsEngineering]

Sorry I am coming back to this, thank you for the help. This Fiddle shows the issue

I would expect to see 1 row with 3 fields in line at 1/3rd width because of the added: styleClasses : "col-md-4",

Inspecting the field and disabling the width: 100% seems to fix issue. I have experimented with css order also.

[lionel-bijaoui]

Ok, I understand, now ! Thank you for the fiddle and all. The only solution I found is to add that bit of CSS. It is a bit cumbersome, since you have to do it for every class you want to use, but it work.

.vue-form-generator .form-group.col-md-4 {
    width: 33.33333333%;
}

updated fiddle

[DelfsEngineering]

That does not seem correct, surely everyone is experiencing this same issue, and if it is just me, then we should try and find out why. I think its only with the Width attribute

There are a lot of classes where its needed, since my forms are dynamic, they could have any bootstrap classes in them.

Do you know what is causing this?

[DelfsEngineering]

Changing veg.css and commenting out the width seems to fix this correctly.

.vue-form-generator .form-group {
    display: inline-block;
    vertical-align: top;
    /*width: 100%;*/
    margin-bottom: 1rem
}

Edit: This hack will mean that every field will need a "styleClasses" : "????", entry

[lionel-bijaoui]

this bit of CSS should prevent that, but it is clearly not working how it is supposed to be. @icebob Can we remove it ? @DelfsEngineering You also have the choice of not including vfg.css.

[DelfsEngineering]

I do need vfg.css for the validation and error classes though.

[lionel-bijaoui]

You can just copy and paste what you really need, and redo that part. It's literally one line to change...

[DelfsEngineering]

Would this be caused by processing the css as css and not sass?

[dastiw1]

icebob please change in css .vue-form-generator .form-group to .vue-form-generator .form-group:not([class*="col"])

For Example: `.form-group:not([class*=col]) { width: 100%; } .form-group { display: inline-block; vertical-align: top; // margin: 0.5rem 0.26rem;

// another code here }`

[hsellik]

Hi!

This seems to be quite an old issue, but I had it today and it seems to me that the fixes did not make their way into the CSS. Fixed by adding additional style and deleting orignal witdth 100% from main class as suggested above:

.form-group{display:inline-block;vertical-align:top;margin-bottom:1rem}.vue-form-generator .form-group:not([class*=" col-"]){width:100%}.vue-form-generator

@icebob @lionel-bijaoui Could you make changes in vfg,css file please?

Regards

[averagejoe77]

I am having this same issue as well. Really disappointed this has not been addressed.

[lionel-bijaoui]

@dastiw1 @DontSeeSharp @averagejoe77 PR welcome ! Just a reminder, we are not paid to do this, we are not at your service, and this is an open source project. Please stop expecting things, we are very busy on the next version of VFG and we only have so much time in our life. I would prefer cooperation and thankfulness instead of this condescending attitude some have here. They were no promise or engagement to fix this issue, and if this is such an annoyance for you, you can contribute and are super welcome to do so.

[zoul0813]

Closing - the suggested code modifications were added in 2.3.0