Add custom property not working for component

[DominaTang]

I follow the link https://surveyjs.io/survey-creator/examples/add-properties-to-property-grid/documentation add a new property:

Serializer.addProperty("question", {
        name: "inputWidth",
        type: "string"         
      });
this.survey.onAfterRenderQuestionInput.add(function(sender, options){

     if(!options.question.inputWidth) return;
      options.htmlElement.style.width = options.question.inputWidth;
}

The survey has components, and each components has a list of question, even I add "inputWidth" property, however, it is not recognized within onAfterRenderQuestionInput() event. However, if add "inputWidth" to Survey questions under root, it can be recognized.

What is the expected behavior?

Custom property defined within component should be recognized by Serializer too

[JaneSjs]

Hello, A custom question should be basically avaialble within a question object. Would you please elaborate on your end goal? If you wish to specify the input width for a single-line text input, use the size property. The width of a question element can be specified by the minWidth, width, and maxWidth settings. Consider the following demo:

{
  "pages": [
    {
      "name": "page1",
      "elements": [
        {
          "type": "text",
          "name": "question1",
          "width": "220px",
          "minWidth": "220px",
          "maxWidth": "220px",
          "size": 10
        }
      ]
    }
  ]
}

Let me know if it works.

[DominaTang]

Hello Jane,

Thank you for the quick response. We have questions with pretty long question titles, however, the Html input is a number. We defined width, minWidth, maxWidth to a certain value, so that input control would not be so long. However, the title is wrapped to a new line because of the width settings. After a google search, someone suggested introducing a custom property to control the input length separately.

For the input, we have normal input control, drop down and table. Let me try the size property.

Thanks, Domina

On Tue, Jul 23, 2024 at 5:09 AM Jane @.***> wrote:

Hello, A custom question should be basically avaialble within a question object. Would you please elaborate on your end goal? If you wish to specify the input width for a single-line text input, use the size https://surveyjs.io/form-library/documentation/api-reference/text-entry-question-model#size property. The width of a question element can be specified by the minWidth, width, and maxWidth settings. Consider the following demo:

{ "pages": [ { "name": "page1", "elements": [ { "type": "text", "name": "question1", "width": "220px", "minWidth": "220px", "maxWidth": "220px", "size": 10 } ] } ] }

Let me know if it works.

— Reply to this email directly, view it on GitHub https://github.com/surveyjs/survey-library/issues/8600#issuecomment-2244670534, or unsubscribe https://github.com/notifications/unsubscribe-auth/ALRTLP54SBNQZFCJN7E4633ZNYMU3AVCNFSM6AAAAABLISY7DWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDENBUGY3TANJTGQ . You are receiving this because you authored the thread.Message ID: @.***>

[DominaTang]

It seems the size property works for the input control.

On Tue, Jul 23, 2024 at 5:09 AM Jane @.***> wrote:

Hello, A custom question should be basically avaialble within a question object. Would you please elaborate on your end goal? If you wish to specify the input width for a single-line text input, use the size https://surveyjs.io/form-library/documentation/api-reference/text-entry-question-model#size property. The width of a question element can be specified by the minWidth, width, and maxWidth settings. Consider the following demo:

{ "pages": [ { "name": "page1", "elements": [ { "type": "text", "name": "question1", "width": "220px", "minWidth": "220px", "maxWidth": "220px", "size": 10 } ] } ] }

Let me know if it works.

— Reply to this email directly, view it on GitHub https://github.com/surveyjs/survey-library/issues/8600#issuecomment-2244670534, or unsubscribe https://github.com/notifications/unsubscribe-auth/ALRTLP54SBNQZFCJN7E4633ZNYMU3AVCNFSM6AAAAABLISY7DWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDENBUGY3TANJTGQ . You are receiving this because you authored the thread.Message ID: @.***>

[JaneSjs]

Hello @DominaTang, Thank you for the update. The size property actually specifies the length of a question input area. Unfortunately, it is impossible to separately specify the width for a question title and a question input. The question is a single element and the title width depends on the input width and vise versa.

Please consider adjusting the question width using the following settings:

• width
• minWidth
• maxWidth

Let me know if you require further assistance.