Can't use row style class on groups
See original GitHub issueApparently 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:
- Created 6 years ago
- Comments:5 (3 by maintainers)
Top 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 >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
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.
tag
is added to the doc