Tabls-list column appearance

[HaAnhNguyen]

Hello,

I am setting up a survey with table-list appearance. But when I open it on the web, the column for question cannot display the full question (as shown in attached image). Is there a way to change the column width or any alternative solutions?

Thank you!

[DeonLengton]

Hi

Although I am not sure why the question is shown like that you can change the width of the whole survey by changing the width parameter in the survey URL:

Adjusting the width of the survey in the screen (width)

The width parameter sets the width, in pixels, of the survey in the screen. For example:

...?width=1500

[mhsu]

This work-around is adequate for displaying a survey on a single device, but it does not carry over into surveys linked from the QR code or shortened URL. It also does not fix the display issue on smaller screens.

Ideally esri will address this issue by updating the Survey123 CSS to conform to online accessibility standards.

[HaAnhNguyen]

Thank you. That does help with the problem 🙂

[ZhifangWang]

@HaAnhNguyen , 

Can you please share those question label strings in the screenshot? It seems that the web app misses handling the question column width in this case.

[DeonLengton]

Hi everyone

I discovered a workaround for this issue. For the question text, replace the spaces between the words with no-break spaces  

For instance: Does&nbsp;the&nbsp;data/information&nbsp;provided<br>relate&nbsp;to&nbsp;the&nbsp;geological&nbsp;mapping&nbsp;field?

You do still need to give it some breaks in the text so you can add a manual <br> as above to achieve that.

Hope this helps someone.

Regards

[mhsu]

This is still a problem, unfortunately. It has now been unaddressed for almost four years.

The issue is with the ``min-width`` value in ``app.loader-v3.19.246.css`` starting on line 28. It is set to ``50px``, which is very small on modern screens and does not re-scale with changing text size (for accessibility and readability).

If this value is set to ``12rem`` instead of ``50px``, it will both display longer text more clearly as well as re-scale with different font sizes.

Example of the ``12rem`` display in the attached screenshot.