Running JsonForm 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 GitHub - patrickklze/tryingJsonformDireflow
[original thread by patrickklze]
[patrickklze]
The above screenshot is should be what the output of the design suppose to be.
[patrickklze]
The above screenshot is what it is showing right now of the styling issue i’m facing
[patrickklze]
Would really appreciate if anyone had face this issue before or knows how i can fix this styling issue
Hi @patrickklze(patrickklze), using Material UI in Direflow needs special handling. For example there is a Material UI plugin and a lot of tips and tricks. Using the plugin the form immediatly looks better (without custom theme).
However it seems to me that you’ll need some custom renderers for elements like enums to make sure that they are handled properly.
To avoid all these complications you might want to use the Vanilla renderers. However they are not as feature rich as the Material renderers.
[patrickklze]
Hi @sdirix(sdirix) ,
I have removed the custom theme and indeed i am able to get the form looking “more correctly”.
The reason for using the custom theme is to make it into a dark theme, if you have any workaround that i could still get my dark theme while not using custome theme, it would be good.
There is another problem, when i click on any of the dropdown list, i notice that the popup is floated all the way to the top. By right it should not be that case, the list should be popup at the dropdown when you click.
Hi @patrickklze(patrickklze), all of these issues are unrelated to JSON Forms itself. It’s not straightforward to get Material UI and Direframe working together so you’ll need to look into that instead.
The popup issue is described in the tips and tricks I linked. This is one of the cases where you will need to add a custom renderer to JSON Forms so you can properly integrate Material UI’s Select with Direframe.
