question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Can't use row style class on groups

See original GitHub issue

Apparently there is a bug that doesn’t allow the fieldset tag to work with the row class. Is it possible to define a different tag to use instead of the fieldset tag? Here is the schema that i’m using:

schema: {
    groups: [{
        styleClasses: "row",

        fields: [
            {
                type: "input",
                inputType: "text",
                label: "First Name",
                model: "firstName",
                placeholder: "First Name",
                required: true,
                styleClasses: "col-xs-12 col-md-6",
            },
            {
                type: "input",
                inputType: "text",
                label: "Last Name",
                model: "lastName",
                placeholder: "Last Name",
                required: true,
                styleClasses: "col-xs-12 col-md-6",
            },
            {
                type: "input",
                inputType: "email",
                label: "Email",
                model: "email",
                placeholder: "Email Address",
                styleClasses: "col-xs-12 col-md-6",
            }
        ],
    }]
}

Basically, I want two columns for the form (unless the screen is too small). But because of the fieldset issue with the row class, I get the full width row and 50% width columns, but they are stacked vertically. So the column widths are correct, but instead of the 2 columns being side-by-side, they are half-width columns, one on top of the other, with lots of empty space to the right.

Is there anyway to set an option to substitute a different tag for the the fieldset tag? Or some other way to accomplish what I’m looking for?

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

3reactions
zoul0813commented, Mar 1, 2018

The fieldset can be changed by passing a “tag” into VFG.

<vue-form-generator tag="div" ... />

This will change all of the “fieldset” tags into “div”, for example.

0reactions
lionel-bijaouicommented, Jun 28, 2018

tag is added to the doc

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to group and style tds in a table row? - Stack Overflow
Basically we use the :after pseudoelement with the styles You are looking for (rounded grey box) and position it as absolute under your...
Read more >
Display: table-row-group not working - HTML & CSS - SitePoint
The problem is that fieldset is a special element and doesn't apply all the css rules you may expect. I never use the...
Read more >
Style Groups of Columns and Alternate Rows of Color in a ...
With HTML and CSS we can style groups of columns using the #colgroup and #col elements to make it easy to create consistent...
Read more >
React Data Grid: Row Styles - AG Grid
Row Highlighting works by the grid adding the CSS class ag-row-hover to the row's getting hovered. The grid cannot depend on using CSS...
Read more >
Lesson 1: Understanding ID and Class in CSS
For example, when you added style to the div element that affected all div ... be used to stylize individual elements (id) or...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found