Widen question background color | XM Community
Skip to main content
Solved

Widen question background color


Forum|alt.badge.img+1

I used this code to change the question background color

jQuery("#"+this.questionId).css("background-color","#F5F5F5")

However, the color comes very close to the text. Is there a way to widen all the margins (top/bottom/left/right) so that there is more space between the text and the box?

Best answer by gPandey_715

Hello ​@Regan 

You can add padding and margin to create more space around the text.

Try this updated code:

Qualtrics.SurveyEngine.addOnload(function() {
    jQuery("#"+this.questionId).css({
        "background-color": "#F5F5F5",
        "padding": "15px", 
        "margin": "10px", 
        "border-radius": "8px" 
    });
});
 

View original

3 replies

gPandey_715
Level 2 ●●
Forum|alt.badge.img+5
  • Level 2 ●●
  • 28 replies
  • Answer
  • February 6, 2025

Hello ​@Regan 

You can add padding and margin to create more space around the text.

Try this updated code:

Qualtrics.SurveyEngine.addOnload(function() {
    jQuery("#"+this.questionId).css({
        "background-color": "#F5F5F5",
        "padding": "15px", 
        "margin": "10px", 
        "border-radius": "8px" 
    });
});
 


Forum|alt.badge.img+1
  • Author
  • 2 replies
  • February 6, 2025

Thank you, that worked great! What would I have to add if I also want to have a border around the box?


gPandey_715
Level 2 ●●
Forum|alt.badge.img+5
  • Level 2 ●●
  • 28 replies
  • February 7, 2025

You just need to add the border property to your CSS inside the .css method. Try the updated code with a border added:

Qualtrics.SurveyEngine.addOnload(function() {
    jQuery("#"+this.questionId).css({
        "background-color": "#F5F5F5",
        "padding": "15px", 
        "margin": "10px", 
        "border-radius": "8px",
        "border": "2px solid #000"
    });
});

 


Leave a Reply