Panel Dynamic - allow add panel description above add panel text button?

[y0n4]

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

Question (possibly a feature)
Is it possible to have a "add panel" description right above the add panel button? Our panel dynamic has numerous elements, and can get very long with other nested panel dynamics, so we want to explain to our users what the button will do when they reach towards the end of the panel dynamic. That way we can address the fundamental usability of the button with a line of instructional text.

What is the current behavior?

The closest thing we can get is using descriptionTitle = "underInput"

What is the expected behavior?

Ideally we want to have a description text where the purple arrow is pointing to. And we can still keep the descriptionTitle to be under title

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

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

Tested page URL: https://codepen.io/y0n4/pen/ExzXNMZ?editors=0010

Test code

your_code_here

Specify your

• browser: chrome
• browser version: 125.0.6422.11
• surveyjs platform (angular or react or jquery or knockout or vue): react
• surveyjs version: 1.10.3

[JaneSjs]

Hello,
You can show a description under the panel by using the QuestionPanelDynamicModel.descriptionLocation property.

"descriptionLocation": "underInput"

However, you may wish to additionally apply the following CSS to add an indent between the description and the bottom border.

.sd-description.sd-question__description--under-input {
    padding-bottom: calc(var(--sd-base-vertical-padding));
}

View Demo

Please let me know if this option works for you.

[y0n4]

Hi, thanks for the response. Sorry- my question was if it's possible to have an add panel text description above the add panel text button (in this case "add vacation" button) and still retain the panely dynamic description like this image, and if not could it be considered to be put in as a feature request?

The answer you provided, "descriptionLocation": "underInput" is the closest thing we can do but it's not exactly what we are looking for.

[JaneSjs]

Hello @y0n4,
Unfortunately, there is no option to render an additional description attached to the Add Panel button. To go simple, please consider adding some descriptive text to the "Add Panel" button's title.
If you want to add more text, consider implementing a custom IAction and render it using a custom component instead of a default Add Panel button component. To add a custom action, implement the survey.onGetPanelFooterActions function. To override the default button component, define the IAction.component property.

Please drop me a line if you have further questions.