conversational-form icon indicating copy to clipboard operation
conversational-form copied to clipboard

having multiple fieldset of radios, children overlapping

Open keyboardbreaker opened this issue 5 years ago • 3 comments

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.

Screenshot 2019-11-27 at 17 53 38

keyboardbreaker avatar Nov 27 '19 18:11 keyboardbreaker

I ran into the same bug. @keyboardbreaker did you find a fix?

denisvlr avatar Mar 20 '20 21:03 denisvlr

@denisvlr unfortunately I had to resort to using the radio options without the fieldset

keyboardbreaker avatar Mar 24 '20 14:03 keyboardbreaker

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", }, ], }, ]

alexhansonsmith avatar Apr 01 '22 14:04 alexhansonsmith