Hi, so I have been using JSONForms for a while now, and have lots of custom components and layout renderers, however, I cannot seem to find a way to reasonably implement the ‘hidden’ components without some hacky solutions.
Here is the issue (simplified):
3 fields in a horizontal layout. fields a, b, c.
a, and c, are set as hidden, b is visible.
however, even though a, and c, are hidden, they still take up space, and therefore shove the component b, in the middle, instead of being truly ‘hidden’ (i.e. display: none) and not taking up any space.
What I want:
Component b would be the left most component since a is now truly hidden. if there were other components, d, etc, they too would be adjacent to b since c is also hidden.
Is there any way to solve this through the layout renderer instead of passing the responsibility to the actual control renderer?
We implemented the renderers this way because our objective was to avoid a “jumping” UI. We handle the layouting of the form within the layout renderers via the Material UI Grid system, and therefore already reserve some space, even if the dispatched to renderer then does not render anything.
To achieve a different behavior you will need to implement custom layout renderer(s) taking over the VerticalLayout, HorizontalLayout and Group rendering.
Your renderer can then either
delegate the grid rendering to the renderers dispatched to, or
execute the visible calculation for the children and then skip rendering them if they are not visible.