If i give large Text for header component in my form builder, UI is getting disrupted. There is no way to limit the length as header component does not p

[hidayathBR]

Description: If i give large Text for header component in my form builder, UI is getting disrupted. There is no way to limit the length as header component does not provide a prop to do it.

Environment Details:

• formBuilder Version:
• Browser:
• OS:

Expected Behavior: i want to limit the length of the header component from the code.

Actual Behavior

Steps to Reproduce

Screenshot - (optional)

[lucasnetau]

FormBuilder doesn't try to get in the way of valid inputs. To restrict the max length for labels you should either hook into the onAddField event and add a maxlen attribute to the input (if HTML labels are disabled), or you need to write a function that limits the number of characters into the div[contenteditable].

On the display side, Header elements already wrap by default in browsers, however in your instance you do not have any whitespace or punctuation for the browser to break on. this can be fixed with CSS, either hiding the overflow or allowing the header to break in the middle of a word.

    overflow: hidden; //or
    word-wrap: break-word;

It makes sense to add word-wrap: break-word to the formBuilder css

[github-actions]

🎉 This issue has been resolved in version 3.19.4 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀