Survey-library: Dynamic Panel field padding not being added to elements with width attribute

Created on 31 Jan 2020 · 1Comment · Source: surveyjs/survey-library

Are you requesting a feature, reporting a bug or asking a question?

Reporting a bug

What is the current behavior?

Dynamic panels containing fields with the width attribute (More than one field in the same row) are not properly adding padding between the elements when a new panel is added dynamically. On refresh, all CSS seems fine, so this seems to only be affecting the new panel's fields as they're added. The specific CSS that is missing on-add is a pading-right: 20px element.style on the first of the two fields.

What is the expected behavior?

Element (Inline) style of 20px padding should be on the first field when a new panel is added.

How would you reproduce the current behavior (if this is a bug)?

See below survey JSON

Provide the test code and the tested page URL (if applicable)

Tested page URL:

N/A, any page using the below JSON

Test code

{
  "pages": [
    {
      "name": "Fancy page",
      "elements": [
        {
          "type": "panel",
          "title": "Large panel",
          "name": "large_panel",
          "state": "expanded",
          "elements": [
            {
              "type": "paneldynamic",
              "title": " ",
              "name": "dynamic_panel",
              "templateElements": [
                {
                  "type": "text",
                  "name": "field_one",
                  "width": "60%",
                  "startWithNewLine": false,
                  "title": "Field One"
                },
                {
                  "type": "text",
                  "name": "field_two",
                  "width": "40%",
                  "startWithNewLine": false,
                  "title": "Field Two"
                }
              ],
              "templateTitle": "Fancy Title",
              "panelCount": 1,
              "minPanelCount": 1,
              "panelsState": "expanded",
              "confirmDelete": true,
              "confirmDeleteText": "Are you sure you want to delete this?",
              "panelAddText": "  Add panel",
              "panelRemoveText": "   Delete"
            }
          ]
        }
      ]
    }
  ]
}