Question T14689
Visible to All Users

Custom control questions

created a year ago

Hello,

I've created such controll

JavaScript
SurveyCore.ComponentCollection.Instance.add({ name: "phone_field", iconName: "icon-phone-field", title: "Phone", elementsJSON: [ { type: "dropdown", name: "countrycode", title: "", isRequired: true, startWithNewLine: false, choicesByUrl: { url: "url", }, }, { type: "text", name: "phone", title: "", startWithNewLine: false, enableIf: "{composite.countrycode} != null", }, ], });

And it looks like that :
Clipboard-File-1.png

How can I hide this:
Clipboard-File-2.png

And how can I put width to countryCode field?
I tried properties like width, minWidth, maxWidth and it doesn't work by some reason. I know that I can do it via css but is it possible via properties?

Answers approved by surveyjs Support

created a year ago

Hello Anton,
You can hide question titles using the question.titleLocation property.

JSON
Survey.ComponentCollection.Instance.add({ name: "phone_field", iconName: "icon-phone-field", title: "Phone", elementsJSON: [ { type: "dropdown", name: "countrycode", title: "", isRequired: true, startWithNewLine: false, titleLocation: "hidden", choicesByUrl: { url: "url", } }, { type: "text", name: "phone", title: "", titleLocation: "hidden", startWithNewLine: false, enableIf: "{composite.countrycode} != null", }, ], });

Regarding the horizontal line: you may enable the 'panelless' mode for the default survey theme: View Demo.
Clipboard-File-1.png

Let me know if you have any questions.

    Comments (2)

      Thank you Jane!
      I have question about width.
      I use your example https://surveyjs.io/survey-creator/examples/add-full-name-to-form-template/reactjs#content-code
      And what I want…I want field which will look like this
      Clipboard-File-1.png

      When I'm trying to change width like that:
      Clipboard-File-2.png

      The result is strange:
      Clipboard-File-3.png
      Clipboard-File-4.png

      How can I fix it?

      Thanks,
      Anton

        Hello Anton,
        Thank you for the update. It appears that these fields are expanded to the available survey container width. If you wish to produce the output as shown in your image, specify the maxWidth property for text fields. Consider this example (View CodeSandbox):

        JSON
        ComponentCollection.Instance.add({ name: "phoneComponent", elementsJSON: [ { type: "text", name: "phonePart1", title: "Phone", minWidth: 100, maxWidth: 150 }, { type: "text", name: "phonePart2", title: " ", minWidth: 300, maxWidth: 300, startWithNewLine: false } ] });

        Clipboard-File-2.png
        Drop me a line if you have any further questions.