Vertical labels in matrix table

Try the below code in the Matrix question JS:

	jQuery("#"+this.questionId+" .Answers th .LabelWrapper span").css({"writing-mode":"vertical-rl","text-orientation":"mixed","white-space":"nowrap"});

Unfortunately, it still is showing up horizontally after adding the JS …

Simple. Which one is best for the JS to take? Appreciate your assistance. 

You can try classic layout for JS to take but if you want Simple layout then use below CSS in the HTML view of Matrix question text.

<style>
.matrix .matrix-table .matrix-scale-points-item{
writing-mode: vertical-lr; 
      text-orientation: mixed; 
      white-space: nowrap; 
align-items:center
}
</style>

Holy cow - that worked!!! Thank you so much. Any way to get them to orientate the other way so they read from bottom to top rather than top to bottom below? I thought it was maybe changing “vertical-lr” to “vertical-rl” but that didn’t work. If not, this will work. 

djunius wrote:

Holy cow - that worked!!! Thank you so much. Any way to get them to orientate the other way so they read from bottom to top rather than top to bottom below? I thought it was maybe changing “vertical-lr” to “vertical-rl” but that didn’t work. If not, this will work. 

 

 

Add transform: rotate(180deg); to your CSS rule.

Boom! Awesome. Thanks, Tom and Shashi! This will make a big difference.

Shashi -

To be able to move my entire survey to Simple, I have to undo a bunch of requirements and validations, which I’d rather not do since it is a long and complex survey. I’ve tried your JS in Classic and it isn’t taking. Do I need to change anything in the coding that points to the exact questionID or anything? Again, much thanks for your help.

-dj

How do I achieve vertical headings in the modern layout?

Both suggestions above unfortunately do not work…

Thanks!