Line Breaks in Questions

[Novak3]

This is a great package. Is there any way to force a line break into (specifically, at the end of) the question text?

The desired behavior is for the question text to display on one line, and the likert scale to expand to full width directly below it.

[Craig-Creeger]

Sure; you will need to edit your CSS just a little bit. This CSS will always position the question above the likert scale and it will make it center-justified.

fieldset.likertScale {
  flex-direction: column;
}

You’ll notice that the likert scale’s width will be set to its minimum width — you want it to be full-width, so now let’s do that:

.likertScale > .likertBand {
  align-self: stretch;
}

Lastly, the question text is center-justified. If you’d prefer that it is left-justified then edit the first code block above to be this:

fieldset.likertScale {
  flex-direction: column;
  align-items: flex-start;
}

Good luck!

[Craig-Creeger]

Update

Version 4.1.0 now handles this particular use-case. Use the new layout prop to position the question text as described above. For example,

<Likert
  question='Your question text goes here'
  responses={[
    { value: 5, text: '5' },
    { value: 10, text: '10' },
    { value: 15, text: '15' },
    { value: 20, text: '20' },
  ]}
  layout='stacked'
/>

[Novak3]

This is fantastic-- sixty seconds of effort on my end, and the survey looks 100x better. Thanks so much!