Widen label section on text entry question | XM Community
Skip to main content

Widen label section on text entry question

  • April 19, 2020
  • 4 replies
  • 154 views

Hello - I am building a form and some of the labels have text that wraps to the next line. I would like the text to be on one line while maintaining the alignment of the text boxes. Is there a way to add space to the label side of a text entry question so text doesn't wrap but also maintain the alignment of the text fields?
image.pngThank you

4 replies

rondev
Level 6 ●●●●●●
Forum|alt.badge.img+22
  • Level 6 ●●●●●●
  • April 19, 2020

Try using below code:
jQuery(".ControlContainer").css("width","0%");


  • Author
  • April 20, 2020

rondev Thank you, I added the code and it worked however it did not move it over enough. Is there a way to move it further?

image.png


KWigg
Level 2 ●●
Forum|alt.badge.img+9
  • Level 2 ●●
  • January 25, 2021

you can also surround the response option with to keep it all on one line (no break).


JohannesCE
Level 6 ●●●●●●
Forum|alt.badge.img+12
  • Level 6 ●●●●●●
  • June 7, 2023

Here's examples of code you can use to prevent labels from wrapping to the next line:

Javascript:

Qualtrics.SurveyEngine.addOnload(function() {
    var labels = document.querySelectorAll("label");
    for (var i = 0; i < labels.length; i++) {
        labels[i].style.whiteSpace = "nowrap";
    }
});

 

CSS:

/* give the label more space to avoid warping to the next line*/
label {
  padding-right: 100px;
}

 

Or:

.container {
  display: flex;
  align-items: center;
  gap: 10px; /* Adds a 10-pixel gap between the label and text field */
}

label {
  white-space: nowrap;
}