Search code examples
jqueryjsondynamicform

Alignment issue while creating dForms using json

I am creating a web page using dForm, for that used json file is as follows,

"action":"index.html",
"method":"get",
"html":[
    {
        "type":"fieldset",
        "caption":"New Issue",
        "html":[
            {     
                {
                    "name":"subject",
                    "class": "form-control",
                    "id":"subject",
                    "caption":"Subject",
                    "type":"text"
                },
                {
                    "name":"description",
                    "id":"description",
                    "class": "form-control",                
                    "caption":"Description",
                    "type":"textarea"
                },
            }
        ]

and I am geting the output. But fields are coming under captions.I want each pair in single line. How can I make that?

the result I got as follows,

enter image description here

but my need is,

enter image description here

How can I do this?

Solution

  • solved the issues by using ,

    "type": "span",
"style":"display:inline-block"

    example for getting on same line,

    {   
                "type": "span",
                "style":"display:inline-block",
                "html": [{
                "name": "subject",
                "id": "subject",
                "type": "text",
                "class": "form-control",
                "value": "",
                "data-validation-key": 0,
                "data-tabs-type": "sensors",
                "readOnly": false,
                "validate": {
                    "required": false,
                    "messages": {
                        "remote": "Invalid Format"
                    }
                }
                }]
            },{ 
                "type": "span",
                "style":"display:inline-block",
                "html": [{
                "name": "description",
                "id": "description",
                "type": "text",
                "class": "form-control",
                "value": "",
                "data-validation-key": 0,
                "data-tabs-type": "sensors",
                "readOnly": false,
                "validate": {
                    "required": false,
                    "messages": {
                        "remote": "Invalid Format"
                    }
                }
                }]
            }

    And also using of formio is another option. https://www.form.io/ Good documentation with more options.