Component styling issue in direflow

[patrickklze]

i am trying to run JsonForm(https://jsonforms.io/) in React Direflow and faced an issue where the form is generated properly but somehow the design and user interface is messed up. I have placed the project in a public github repo, here is the link https://github.com/patrickklze/tryingJsonformDireflow.git

The below screenshot is what it supposed to look like.

The below screenshot is the messed up ui design it is generating now.

[SimonHoiberg]

Hi @patrickklze Thanks for creating this issue.

It seems like it's the styles from material-ui that are missing. In your public repo, I can see that you're not using the material-ui plugin. Try to use that.

Also, check out these tips on how to work with material-ui in Direflow :blush: https://direflow.io/guides-and-tips#tips-for-material-ui

[patrickklze]

Hi @Silind,

I have previously tried adding in the plugin too but it didn't work.

import { DireflowComponent } from 'direflow-component';
import App from './App';

export default DireflowComponent.create({
  component: App,
  configuration: {
    tagname: 'testingjsonform-component',
  },
  plugins: [
    {
      name: 'font-loader',
      options: {
        google: {
          families: ['Advent Pro', 'Noto Sans JP'],
        },
      },
    },
    {
      name: 'material-ui'
    },
  ],
});

I have pushed to the repo with the updated plugin and you can see that not only that it didn't work, now the whole background turns white.

[SimonHoiberg]

Hmm alright! Let me take a look, and I'll get back to you here :slightly_smiling_face:

[patrickklze]

Hi @Silind , I have also found out that not just the ui design having issues. it looks like the dropdown list of this jsonform in direflow has some issues as well

[patrickklze]

Hi @Silind , Just checking in if you have any advice on the issue i face? I have been trying few methods and also on different other open-source libraries like DHX spreadsheet and gantt chart and i found out that they do have the similar kind of problem where "pop-ups" are not styling properly once put in direflow but working perfectly fine in normal react.

Hope to hear from the team soon as i think this can solve many problems that i am facing. :)

[patrickklze]

Hmm alright! Let me take a look, and I'll get back to you here 🙂

Hi Team.

Just checking in again if there is any advice on this issue? 🙂