Div within Paragraph

[mathi1993]

Description:

If you create a paragraph-element with multiple rows, the form builder will wrap a div around each row. But because the parent element is a p, the div's inside got wrapped out of it. HTML doesn't allow block-elements inside of a p-element.

Environment Details:

• formBuilder Version: 3.6.1
• Browser: Tested with firefox and chrome
• OS: Windows

Expected Behavior:

Rows of a paragraph-formbuilder-element need to be inside of the p element. If you change the p element to a div element, it will work.

Actual Behavior:

Content of a paragraph-formbuilder-element got wrapped out of the correct p element, if there is more than one row

Steps to Reproduce:

Create a "paragraph-element" Put mulriple rows inside of the textarea The output is wrong - content of the paragraph-element is not inside the correct element.

Screenshot:

Current html output (formRender function) is:

<p id="control-3454912">
      <div>Row 1</div>
      <div>Row 2</div>
      <div>Row 3<br></div>
</p>

Browser reads it as:

<p id="control-3454912"></p>
<div>Row 1</div>
<div>Row 2</div>
<div>Row 3<br></div>

[lucasnetau]

This is caused by the browsers, can be fixed by changing the contenteditable fields to inline-block, this causes browsers to use<br> used instead of <div>

/** Fix Chrome adding <div> when adding carriage returns to content editing fields */
.form-wrap.form-builder .frmb .form-elements [contenteditable].form-control {
    display: inline-block;
}