CSS not loading in FormViewer

[minh-tranchi]

This is my form with the custom container which has been modified to show flexDirection is row But in the FormViewer, It's still show the container in column direction

I've check the JSON data for the form and it do have the css property for it, is there any way to fix this?

[optimajet]

@minh-tranchi please attach the JSON of the form and the definitions of your custom components needed to run the example.

Here is an example of how the container for the components from the demo is defined, maybe this will help:

import styled from '@emotion/styled'
import {containerStyles, define, node} from '@react-form-builder/core'

const RsContainer = styled.div`
  display: flex;
`
const {flexDirection, gap} = containerStyles

export const rsContainer = define(RsContainer, 'RsContainer')
  .name('Container')
  .kind('container')
  .props({
    children: node.hinted('Component children')
  })
  .css({
    ...containerStyles,
    flexDirection: flexDirection.default('column'),
    gap: gap.default('10px')
  })

[minh-tranchi]

Thanks mate, your given sample handle my problem quite well. I forgot to define using containerStyles props

[minh-tranchi]

I'm having a problem when using the HTML of the Form Viewer for sending Email Knowing that Gmail will remove class in the HTML when sending. Is there any way for me to get the inline Style instead of compiled class so that the form style still show in Gmail @optimajet

[optimajet]

@minh-tranchi

Knowing that Gmail will remove class in the HTML when sending. Is there any way for me to get the inline Style instead of compiled class so that the form style still show in Gmail

Unfortunately not.