But in the mui project there is also a feature to display tabs vertical:
For the vanilaRenderer I solved this by tweeking the CSS, but for materialRenderer this seems much more complex. So I wonder if there is a trick how I can tell my react form to display categories vertical?
The Material UI Theming support is very powerful. It can also be used to set default props of Material UI components. You could try handing over orientation="vertical" to the Tabs component this way. See here for more information.
Yes, I have found this too. But I was not clear how to use the options? This is not really explained in the documentation or at least I did not found an example about setting options.
In the mean time I switched back to the VanillaRenderer as I don’t want to overload my modeller application without need (you know I am working now on a custom renderer).
I’m wondering if anyone was able to get this to work. I believe I’m successfully doing the MUI theme part, but I’m having a display problem: the tabs get full-width, and the tab content is displayed beneath them.
We use AppBar for the tabs which automatically grabs 100% width
Our CategoryRenderer does not introduce a wrapper container element, e.g. a div
Assuming you render the Categorization at the root of the form you can apply display: 'flex' on a container div wrapping the JsonForms component and apply width: inherit on the app bar via the default props mechanism, e.g.
If that is not the case for you you could wrap your Categorization with a VerticalLayout and then target the div of the VerticalLayout to apply the display: flex.
Alternatively you can of course always just use a custom renderer. I would also be fine with a contribution to JsonForms which adds a wrapper Box element in the Categorization renderer and replaces the AppBar component with a more neutral component.