surveyjs / survey-creator

Scalable open-source survey software to generate dynamic JSON-driven forms within your JavaScript application. The form builder features a drag-and-drop UI, CSS Theme Editor, and GUI for conditional logic and form branching.
https://surveyjs.io/open-source
Other
910 stars 372 forks source link

Radio/Check/Dropdown questions in Creator #3735

Closed novikov82 closed 1 year ago

novikov82 commented 1 year ago

Desktop is ok: Image

Mobile is ok:

Image

Design mode - terible:

Image

{
 "title": "Pizza Order Form",
 "logoHeight": "100px",
 "logoPosition": "right",
 "completedHtml": "<h3>Thank you for placing the order!</h3>",
 "pages": [
  {
   "name": "page2",
   "elements": [
    {
     "type": "panel",
     "name": "panel3",
     "elements": [
      {
       "type": "dropdown",
       "name": "qty_n",
       "minWidth": "100px",
       "title": "Qty",
       "hideNumber": true,
       "choices": [
        {
         "value": "Item 1",
         "text": "1"
        },
        {
         "value": "Item 2",
         "text": "2"
        },
        {
         "value": "Item 3",
         "text": "3"
        },
        {
         "value": "Item 4",
         "text": "4"
        },
        {
         "value": "Item 5",
         "text": "5"
        }
       ],
       "allowClear": false
      },
      {
       "type": "dropdown",
       "name": "size_n",
       "minWidth": "100px",
       "startWithNewLine": false,
       "title": "Size",
       "hideNumber": true,
       "choices": [
        {
         "value": "5",
         "text": "Small"
        },
        {
         "value": "6",
         "text": "Medium"
        },
        {
         "value": "7",
         "text": "Large"
        }
       ],
       "allowClear": false,
       "autocomplete": "name"
      }
     ],
     "title": "Pizza Neapolitan"
    },
    {
     "type": "panel",
     "name": "panel3",
     "elements": [
      {
       "type": "dropdown",
       "name": "qty_m",
       "minWidth": "100px",
       "title": "Qty",
       "hideNumber": true,
       "choices": [
        {
         "value": "Item 1",
         "text": "1"
        },
        {
         "value": "Item 2",
         "text": "2"
        },
        {
         "value": "Item 3",
         "text": "3"
        },
        {
         "value": "Item 4",
         "text": "4"
        },
        {
         "value": "Item 5",
         "text": "5"
        }
       ],
       "allowClear": false
      },
      {
       "type": "dropdown",
       "name": "size_m",
       "minWidth": "100px",
       "startWithNewLine": false,
       "title": "Size",
       "hideNumber": true,
       "choices": [
        {
         "value": "6",
         "text": "Small"
        },
        {
         "value": "7",
         "text": "Medium"
        },
        {
         "value": "8",
         "text": "Large"
        }
       ],
       "allowClear": false
      }
     ],
     "title": "Marinara",
     "startWithNewLine": false
    },
    {
     "type": "panel",
     "name": "panel6",
     "elements": [
      {
       "type": "dropdown",
       "name": "qty_p",
       "minWidth": "100px",
       "title": "Qty",
       "hideNumber": true,
       "choices": [
        {
         "value": "Item 1",
         "text": "1"
        },
        {
         "value": "Item 2",
         "text": "2"
        },
        {
         "value": "Item 3",
         "text": "3"
        },
        {
         "value": "Item 4",
         "text": "4"
        },
        {
         "value": "Item 5",
         "text": "5"
        }
       ],
       "allowClear": false
      },
      {
       "type": "dropdown",
       "name": "size_p",
       "minWidth": "100px",
       "startWithNewLine": false,
       "title": "Size",
       "hideNumber": true,
       "choices": [
        {
         "value": "5",
         "text": "Small"
        },
        {
         "value": "6",
         "text": "Medium"
        },
        {
         "value": "7",
         "text": "Large"
        }
       ],
       "allowClear": false
      }
     ],
     "title": "Pepperoni",
     "startWithNewLine": false
    }
   ],
   "title": "Menu"
  }
 ],
 "completeText": "Submit",
 "questionsOnPageMode": "singlePage",
 "widthMode": "static",
 "width": "1400"
}
mikeamelin commented 1 year ago

Need to use min-width for all question. Let's start with 240-260px.