[Ranking] Auto-line wrap in too long choice options

[GER-Jani]

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

Bug

What is the current behavior?

No auto-line wrap in too long choice options (even worse in horizontal select-to-rank layout)

What is the expected behavior?

• Auto-line warp in long choice options
• Allow multiline choice options

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

Use very long choice options in ranking questions

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

Tested page URL: https://surveyjs.io/published?id=d7dc829d-2128-474d-89fd-92081c5453e2

Test code

{
 "logoPosition": "right",
 "pages": [
  {
   "name": "page1",
   "elements": [
    {
     "type": "ranking",
     "name": "question1",
     "title": "How would you deal with situation xyz?",
     "description": "I would most likely deal with situation xyz as follows ...",
     "hideNumber": true,
     "isRequired": true,
     "choices": [
      {
       "value": "Item 1",
       "text": "This is a very long description to deal with situation xyz in case of A."
      },
      {
       "value": "Item 2",
       "text": "This is a very long description to deal with situation xyz in case of B."
      },
      {
       "value": "Item 3",
       "text": "This is a very long description to deal with situation xyz in case of C."
      },
      {
       "value": "Item 4",
       "text": "Another very long description to deal with situation xyz in case of D."
      }
     ],
     "selectToRankEnabled": true,
     "selectToRankAreasLayout": "vertical"
    }
   ]
  }
 ]
}

Specify your

• browser: Google Chrome
• browser version: Version 119.0.6045.124
• surveyjs platform (angular or react or jquery or knockout or vue): Website
• surveyjs version: Current

[Faisalalali]

I will try to help you address the first issue. It bugged me for a while too. To fix the line wrap issue in the "ranking" type questions, I was able to fix that by applying some old fashion CSS.

.sv-ranking-item__text {
  white-space: normal;
}

Read more about how to set up custom css here: https://surveyjs.io/form-library/examples/customize-survey-with-css

[GER-Jani]

@Faisalalali Thank you, it works and is acceptable for a workaround.

[JaneSjs]

T18830 - Ranking questions don't have wordwrap enabled. https://surveyjs.answerdesk.io/internal/ticket/details/T18830

[SamMousa]

Hi @dmitry-kurmanov please note some more issues that break word wrapping. The .sv-ranking-item has a fixed height. As soon as text wraps over it the ranking items start to overlap:

Adding a height:auto fixes this issue.

Also the placeholder while dragging and dropping has a very low max-width, causing it to show ellipsis as well. We've fixed that on our side with max-width: unset.

So our full CSS patch looks like this

.rendered .sv-ranking-item__text {
	white-space: normal;
}

.rendered .sv-ranking-shortcut {
	max-width: unset;
}

.rendered .sv-ranking-item {
	height: auto;
}

(We add a .rendered class after the survey is rendered and use it here to make our CSS selector more specific than the ones bundled with sjs).

Thanks for working on the fix, I pinged you to make sure you don't miss it while working on the PR! <3

[JaneSjs]

+1 T19031 - Ranking Question Responsiveness https://surveyjs.answerdesk.io/internal/ticket/details/T19031

[dmitry-kurmanov]

probably need to change example https://surveyjs.io/form-library/examples/select-items-to-rank/reactjs ( shorter names )

[dmitry-kurmanov]

https://www.figma.com/design/jcuAUsN02n2yJerx39mqf9/LBR-->-Library-Preview?node-id=2575-324&t=nqNQ3PaaesPo00uU-4

[GER-Jani]

@dmitry-kurmanov This is a really poor implementation so far if the line break does not occur at spaces and simply breaks words into two pieces.

Or here in your example: https://surveyjs.io/form-library/examples/select-items-to-rank/reactjs