Move text entry form label to the right of the response box? | XM Community
Skip to main content
Solved

Move text entry form label to the right of the response box?

  • August 30, 2019
  • 10 replies
  • 374 views

chart
Forum|alt.badge.img+1
I'm trying to replicate a large medical procedure survey that asks the recipient to enter short numerical data for each procedure. The procedure descriptions vary greatly in length and that causes the response boxes for each label to be staggered very differently from one section to another. It also means some of the labels end up with a big gap to their corresponding response box. This would be much more user friendly if the response boxes could be put to the left of the labels. An example of the staggering problem is below: !

Best answer by TomG

Try using a vertical text constant sum question with no total. Report back on whether it works for you or not.

10 replies

TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • 6083 replies
  • Answer
  • August 30, 2019
Try using a vertical text constant sum question with no total. Report back on whether it works for you or not.

chart
Forum|alt.badge.img+1
  • Author
  • 6 replies
  • August 30, 2019
Thank you TomG! Looks like that'll do the trick.

Forum|alt.badge.img+5
  • Level 1 ●
  • 16 replies
  • November 1, 2019
Hi @TomG , I have the same problem and tried your trick. But then I have another problem: how can I exclude the box with "0" before each label (when I click "no total" only the total disappears) and how can I make the text try box bigger so I can write several lines (as I would choose "form" as entry text field)? Thanks a lot in advance! Best, Laura

TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • 6083 replies
  • November 1, 2019
> @Lee783 said: > Hi @TomG , I have the same problem and tried your trick. But then I have another problem: how can I exclude the box with "0" before each label (when I click "no total" only the total disappears) and how can I make the text try box bigger so I can write several lines (as I would choose "form" as entry text field)? > Thanks a lot in advance! > Best, Laura Laura, I don't think a constant sum if the right solution for you. I'm not sure I understand what you are trying to do. Have multiple multi-line text entry boxes where the labels are on the right?

Forum|alt.badge.img+5
  • Level 1 ●
  • 16 replies
  • November 4, 2019
Hi @TomG , thanks a lot for getting back to me. Yes, what I'm trying to do is having multiple multi-line text entry boxes with labels on the left. The problem that I have when using "text entry/form": the distance between text entry boxes and labels is huge and should be smaller (see screenshot).!. And if I use "< nobr >" it looks good on desktop, but not on mobile - then the entry boxes are way to small for any entries. Thank you! Laura

TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • 6083 replies
  • November 4, 2019
Try adding this to your question text: ``` <style>.Skin .TE .FORM span.LabelWrapper { padding-right: 0; }</style> ```

Forum|alt.badge.img+5
  • Level 1 ●
  • 16 replies
  • November 4, 2019
> @TomG said: > Try adding this to your question text: > ``` > <style>.Skin .TE .FORM span.LabelWrapper { padding-right: 0; }</style> > ``` Thank you, where exactly shall I place it? Directly in the label text like this: <style>.Skin .TE .FORM span.LabelWrapper { padding-right: 0; }</style> <div style="text-align: left;">LABEL</div>

TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • 6083 replies
  • November 4, 2019
> @Lee783 said: > > @TomG said: > > Try adding this to your question text: > > ``` > > <style>.Skin .TE .FORM span.LabelWrapper { padding-right: 0; }</style> > > ``` > > Thank you, where exactly shall I place it? Directly in the label text like this: > > <style>.Skin .TE .FORM span.LabelWrapper { padding-right: 0; }</style> > <div style="text-align: left;">LABEL</div> > At the bottom of your question text in HTML View.

Forum|alt.badge.img+5
  • Level 1 ●
  • 16 replies
  • November 5, 2019
Ok thank you, I did, but unfortunately, it doesn't change anything :(

TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • 6083 replies
  • November 5, 2019
> @Lee783 said: > Ok thank you, I did, but unfortunately, it doesn't change anything :( Some possible suggestions: 1. This could be theme dependent. Use your browser's Inspect feature to determine if there are elements with padding or margin, then use CSS rules to eliminate it. 2. Use a CSS rule to right justify the label cells 3. Use some combination of overflow-wrap, word-break, and hypens CSS properties to break the long 4. Use JS to increase the width of the label column