Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove “form-group field field-object” classnames from SchemaField #2280

Open
NeslihanKolukisa opened this issue Mar 17, 2021 · 4 comments
Assignees
Labels

Comments

@NeslihanKolukisa
Copy link

Below is the custom template code I have given to the json schema form. For objects in the form schema, it automatically creates a divi with the form-group field field-object class and MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-3 class. I don't want these to happen. I want all items to be lined up side by side (MuiGrid-root MuiGrid-item MuiGrid-grid-xs-6). How can I do it.

const CustomTemplate = (oftProps: ObjectFieldTemplateProps):any => (
  <div>
    <Grid container spacing={getSpacing(3)}>
      {oftProps.properties.map((element) => {
        if ((element.content.props.schema.type === undefined && element.content.props.schema.$ref === undefined)
            || (element.content.props.schema.type !== undefined && element.content.props.schema.type !== 'object')
          || enumFieldControl(element)) {
          return <Grid item xs={getColumns(2)}><Paper>{element.content}</Paper></Grid>;
        }
        return <Hidden>{element.content}</Hidden>;
      })}
    </Grid>
  </div>
);
@stale
Copy link

stale bot commented May 26, 2023

This issue has been automatically marked as possibly close because it has not had recent activity. It will be closed if no further activity occurs. Please leave a comment if this is still an issue for you. Thank you.

@stale stale bot added the possibly close To confirm if this issue can be closed label May 26, 2023
@nickgros nickgros added needs triage Initial label given, to be assigned correct labels and assigned and removed possibly close To confirm if this issue can be closed labels Jun 1, 2023
@nickgros
Copy link
Contributor

nickgros commented Jun 1, 2023

I'm running into this. It's causing problems in an app that uses both MUI and Bootstrap where I want to use the MUI theme and use no bootstrap styles--this causes issues because form-group is a bootstrap class. Right now, the only way to remove these classes is to override the SchemaField, so instead I'm overriding the bootstrap styles with CSS.

In a future major version, we could consider only adding class names in templates (i.e. hard-coded class names should not be added at the field level)

@nickgros
Copy link
Contributor

One could wrap the existing component(s) and programmatically remove the classnames, but ideally I would like for us to remove classnames from fields in v6

@nickgros nickgros removed the needs triage Initial label given, to be assigned correct labels and assigned label Jun 23, 2023
@nickgros nickgros changed the title How can I delete the divi with the automatically generated “form-group field field-object” class for objects in React json schema Remove “form-group field field-object” classnames from SchemaField Jun 30, 2023
@heath-freenome heath-freenome self-assigned this Nov 17, 2023
@heath-freenome
Copy link
Member

Move to from the template into the field

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

4 participants