conversational-form
conversational-form copied to clipboard
having multiple fieldset of radios, children overlapping
I have 2 fieldset in a formless setup: mortgage_reason and credit_status Within my formFields I have this:
{
'id': 'mortgage_reason',
'tag': "fieldset",
'name': 'mortgage_reason',
'cf-questions': 'Why do you require the fund?',
"required": "required",
"children":[
{ "tag": "input", "cf-label": "<i class=\"fa fa-percent\"> Better Rate</i>", "value": "BETTERRATE", 'type': 'radio', },
{ "tag": "input", 'cf-label':"<i class=\"fa fa-home\"> New Home</i>", 'value': 'NEWHOME', 'type': 'radio', },
{ "tag": "input", "cf-label": "<i class=\"fa fa-plane\"> Holiday</i> ", "value": "HOLIDAY", 'type': 'radio', },
{ "tag": "input", "cf-label": "<i class=\"fa fa-question-circle-o\"> Other</i>", "value": "OTHER", 'type': 'radio', }
]
},
{
"id": "credit_status",
"tag": "fieldset",
"name": "credit_status",
"cf-questions": "What is your credit status?",
"cf-conditional-mortgage_reason": "BETTERRATE||NEWHOME||HOLIDAY||OTHER",
"required": "required",
"children":[
{ "tag": "input", "cf-label": "Good", "value": "GOOD", 'type': 'radio', },
{ "tag": "input", "cf-label": "Fair", "value": "AVERAGE", 'type': 'radio', },
{ "tag": "input", "cf-label": "Below Average", "value": "AVERAGE", 'type': 'radio', },
{ "tag": "input", "cf-label": "Poor", "value": "BAD", 'type': 'radio', },
{ "tag": "input", "cf-label": "Not Sure", "value": "NOTSURE", 'type': 'radio' },
]
},
Children of credit_status are overflowing into the question for mortgage_reason. I don't understand why.

I ran into the same bug. @keyboardbreaker did you find a fix?
@denisvlr unfortunately I had to resort to using the radio options without the fieldset
Hey @denisvlr @keyboardbreaker.
I am a bit late to this one but I resolved this issue by adding a name field to every child object (see below).
[ { id: "mortgage_reason", tag: "fieldset", name: "mortgage_reason", "cf-questions": "Why do you require the fund?", required: "required", children: [ { name: "mortgage_reason", tag: "input", "cf-label": '<i class="fa fa-percent"> Better Rate</i>', value: "BETTERRATE", type: "radio", }, { name: "mortgage_reason", tag: "input", "cf-label": '<i class="fa fa-home"> New Home</i>', value: "NEWHOME", type: "radio", }, { name: "mortgage_reason", tag: "input", "cf-label": '<i class="fa fa-plane"> Holiday</i> ', value: "HOLIDAY", type: "radio", }, { name: "mortgage_reason", tag: "input", "cf-label": '<i class="fa fa-question-circle-o"> Other</i>', value: "OTHER", type: "radio", }, ], }, { id: "credit_status", tag: "fieldset", name: "credit_status", "cf-questions": "What is your credit status?", "cf-conditional-mortgage_reason": "BETTERRATE||NEWHOME||HOLIDAY||OTHER", required: "required", children: [ { name: "credit_status", tag: "input", "cf-label": "Good", value: "GOOD", type: "radio", }, { name: "credit_status", tag: "input", "cf-label": "Fair", value: "AVERAGE", type: "radio", }, { name: "credit_status", tag: "input", "cf-label": "Below Average", value: "AVERAGE", type: "radio", }, { name: "credit_status", tag: "input", "cf-label": "Poor", value: "BAD", type: "radio", }, { name: "credit_status", tag: "input", "cf-label": "Not Sure", value: "NOTSURE", type: "radio", }, ], }, ]