Hello,
I am working through a fairly complex UI schema. The issue I am running into is that all of the fields wind up being very smooshed together.
Is there a way to increase the padding between the form? Specifically, I want more space between the Driver fields, more space before and after the array of otherDrivers.
UISchema:
{
type: 'VerticalLayout',
elements: [
{
type: 'Control',
label: 'UseNhtsaRating',
scope: '#/properties/UseNhtsaRating',
},
{
type: 'Control',
label: 'CreditScore',
scope: '#/properties/CreditScore',
},
{
type: 'Control',
scope: '#/properties/otherDrivers',
options: {
elementLabelProp: 'licenseNum',
detail: {
type: 'VerticalLayout',
elements: [
{
type: 'Control',
scope: '#/properties/age',
},
{
type: 'Control',
scope: '#/properties/firstName',
},
{
type: 'Control',
scope: '#/properties/lastName',
},
{
type: 'Control',
scope: '#/properties/licenseNum',
},
{
type: 'Control',
scope: '#/properties/middleName',
},
],
},
},
},
{
type: 'Control',
label: 'Region',
scope: '#/properties/Region',
},
{
type: 'Control',
label: 'Driver',
scope: '#/properties/driver',
},
],
}}
Schema
{
"type": "object",
"properties": {
"UseNhtsaRating": {
"title": "UseNhtsaRating",
"type": "boolean",
"default": true
},
"CreditScore": {
"title": "CreditScore",
"type": "integer"
},
"otherDrivers": {
"title": "Other Drivers",
"type": "array",
"default": [],
"items": {
"$ref": "#/definitions/Driver"
}
},
"Region": {
"title": "Region",
"type": "string",
"maxLength": 20000,
"enum": [
"West",
"East"
]
},
"driver": {
"title": "Driver",
"default": {},
"$ref": "#/definitions/Driver"
}
},
"definitions": {
"Driver": {
"title": "driver",
"type": "object",
"definitions": {},
"required": [
"licenseNum",
"firstName",
"lastName"
],
"properties": {
"licenseNum": {
"title": "License Number",
"type": "string",
"maxLength": 20000
},
"firstName": {
"title": "First Name",
"type": "string",
"maxLength": 20000
},
"middleName": {
"title": "Middle Name",
"type": "string",
"maxLength": 20000
},
"lastName": {
"title": "Last Name",
"type": "string",
"maxLength": 20000
},
"age": {
"title": "age",
"type": "number"
}
}
}
}
}