UiSchema in Jupyter Dialog Box not working at all

[misterfads]

Describe the bug

I'm currently trying to get a Jsonform to appear inside a Jupyter Lab dialog box. It appears but it seems to completely disregard the uischema I provide. Eg. It just uses the default VerticalLayout for all schema fields everytime, even if I indicate I want certain fields in a horizontal layout. I couldn't find any relevant issue that was similar to this.

Edit: seems like other parts of the uischema like showing/hiding fields with Rule, and groups works, it just refuses to show any Horizontal Layout

Expected behavior

Expect that the json form reflects the uischema I provide

Steps to reproduce the issue

Display a jsonform inside a Jupyter dialog box

Screenshots

No response

Which Version of JSON Forms are you using?

v3.2.1

Framework

React

RendererSet

Vanilla

Additional context

No response

[sdirix]

Hi @misterfads,

Can you post the schema and uischema you are using? Note that the React Vanilla renderer set just renders a bunch of HTML elements with CSS classes. The stylesheet for these classes is not attached by default. You can either style them yourself or you can use our example stylesheet.

[misterfads]

I have @jsonforms/vanilla-renderers installed, which according to https://jsonforms.io/api/vanilla/globals#horizontallayoutrenderercomponent seems to include some styling for HorizontalLayout. Which makes sense because I did not add any styling for the Group layout to show. So I am a bit confused then on if I need to add more config/css that you mentioned in your previous comment.

Here is my schema, uischema, it is from a basic example from the docs.

  let testschema = {
    "type": "object",
    "required": [
      "age"
    ],
    "properties": {
      "firstName": {
        "type": "string",
        "minLength": 2,
        "maxLength": 20
      },
      "lastName": {
        "type": "string",
        "minLength": 5,
        "maxLength": 15
      },
      "age": {
        "type": "integer",
        "minimum": 18,
        "maximum": 100
      },
      "gender": {
        "type": "string",
        "enum": [
          "Male",
          "Female",
          "Undisclosed"
        ]
      },
      "height": {
        "type": "number"
      },
      "dateOfBirth": {
        "type": "string",
        "format": "date"
      },
      "rating": {
        "type": "integer"
      },
      "committer": {
        "type": "boolean"
      },
      "address": {
        "type": "object",
        "properties": {
          "street": {
            "type": "string"
          },
          "streetnumber": {
            "type": "string"
          },
          "postalCode": {
            "type": "string"
          },
          "city": {
            "type": "string"
          }
        }
      }
    }
  }
  let testuischema = {
    "type": "VerticalLayout",
    "elements": [
      {
        "type": "HorizontalLayout",
        "elements": [
          {
            "type": "Control",
            "scope": "#/properties/firstName"
          },
          {
            "type": "Control",
            "scope": "#/properties/lastName"
          }
        ]
      },
      {
        "type": "HorizontalLayout",
        "elements": [
          {
            "type": "Control",
            "scope": "#/properties/age"
          },
          {
            "type": "Control",
            "scope": "#/properties/dateOfBirth"
          }
        ]
      },
      {
        "type": "HorizontalLayout",
        "elements": [
          {
            "type": "Control",
            "scope": "#/properties/height"
          },
          {
            "type": "Control",
            "scope": "#/properties/gender"
          },
          {
            "type": "Control",
            "scope": "#/properties/committer"
          }
        ]
      },
      {
        "type": "Group",
        "label": "Address for Shipping T-Shirt",
        "elements": [
          {
            "type": "HorizontalLayout",
            "elements": [
              {
                "type": "Control",
                "scope": "#/properties/address/properties/street"
              },
              {
                "type": "Control",
                "scope": "#/properties/address/properties/streetnumber"
              }
            ]
          },
          {
            "type": "HorizontalLayout",
            "elements": [
              {
                "type": "Control",
                "scope": "#/properties/address/properties/postalCode"
              },
              {
                "type": "Control",
                "scope": "#/properties/address/properties/city"
              }
            ]
          }
        ],
        "rule": {
          "effect": "SHOW",
          "condition": {
            "scope": "#/properties/committer",
            "schema": {
              "const": true
            }
          }
        }
      }
    ]
  }

  let testdata = {
    "f": "Max",
    "a": "Power",
    "d": 'asdf'
  }

So it looks something like this, you can see some sort of basic styling got added for the Group, but the HorizontalLayout (street, streetnumber) is still vertical

[sdirix]

Hi @misterfads, There is no CSS automatically included by JSON Forms in the React Vanilla renderers. What we do is assign CSS classes but we don't provide styles for them by default.

The group has some styling as it uses a fieldset HTML element which is styled by default in browsers.

If you want the horizontal and vertical layouts to work you need to provide the appropriate styles. JSON Forms simply applies a different CSS class to them, besides that they are exactly the same. In the example CSS we use flex-box to orient them horizontally and vertically.

Besides that, you already have some customization in place as we don't render these question mark items by default.

[misterfads]

I see, thank you

So you're saying I should use a custom layout then as described here? https://jsonforms.io/docs/tutorial/custom-layouts

Is there any example anywhere for an example custom renderer for vanilla layouts?

[misterfads]

Ah ok I found

https://github.com/eclipsesource/jsonforms/blob/master/packages/vanilla-renderers/Styles.md,

providing vanillaStyles in the styleContextValue variable added default vanilla renderer behaviors for layouts

So If I want to adjust these default values, do I instead need to create a custom layout renderer with https://jsonforms.io/docs/tutorial/custom-layouts ?

[sdirix]

Hi @misterfads,

Note that all our renderers are the same as "custom renderers". So you can always look through our code base and check how we implemented them.

I'll close this issue as the original topic is now answered.

I can also recommend checking the community forum for usage questions.