required labels red stars are misplaced when the form is placed inside a scrollable container

[ghost]

See this fiddle for example (i forked it from somewhere else and just adapted the max-height and overflow style attribute of the div container of the form):
https://jsfiddle.net/3fg4o9dv/1/

This is due to the fact that the :after that renders the star is positioned absolute

[dflock]

Well, it seems like removing the position: absolute; line from the formGenerator.css fixes this:

&.required {
  > label:after {
    content: "*";
    font-weight: normal;
    color: Red;
    /* position: absolute; */
    padding-left: 0.2em;
    font-size: 1em;
  }
}

@icebob:

However, I can't figure out how to test this locally? I make the change - and webpack dev will recompile - but the dev examples don't seem to include vfg.css - which doesn't get compiled by npm run dev anyway?

When I add this css file to the index.html: https://unpkg.com/[email protected]/dist/vfg.css, it loads it, but I think this change: b5d58ac broke the css; this is a separate issue, but it looks like formGenerator line 359 needs to change from this:

  fieldset.vue-form-generator {

to this:

  .vue-form-generator {

[icebob]

@dflock
You can test css in dev mode because in this case the css is not extracted, it is in the bundle. So no need to add css file to html.

The "Grouping" feature breaks the CSS selector fieldset.vue-form-generator because the layout changed (wrapped with a div) and now the div has vue-form-generator class. I removed the absolute style and remove the fieldset from CSS selector. These are fixed this issue, but I don't like that we wrapped the layout with a new field. :(

[icebob]

@gregorius90 https://jsfiddle.net/3fg4o9dv/3/

[dflock]

Thanks - makes sense now. The fact that I couldn't see the vfg.css file - combined with the fieldset.vue-form-generator selector coincidentally being broken, meant that I couldn't see the styles being applied from the bundle either - which is what confused me, sorry!

[icebob]

Don't say sorry, I'm happy that you help me 👍