Widen question background color | Experience Community
Skip to main content
JoseS
Administrator
1 year ago
Solved

Widen question background color

  • Feb 6, 2025 1:19 AM UTC
  • 3 replies
  • 114 views
Level 2 ●●
Forum|alt.badge.img+2

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 4 ●●●●
Forum|alt.badge.img+10
  • gPandey_715
  • Level 4 ●●●●
  • Answer
  • Feb 6, 2025 4:52 AM UTC

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" 
    });
});
 

GAP | Senior Implementation Engineer | www.linkedin.com/in/gaurav-pandey-8291092267gap
Level 2 ●●
Forum|alt.badge.img+2
  • Regan
  • Author
  • Level 2 ●●
  • Feb 6, 2025 2:19 PM UTC

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 4 ●●●●
Forum|alt.badge.img+10
  • gPandey_715
  • Level 4 ●●●●
  • Feb 7, 2025 5:08 AM UTC

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"
    });
});

 

GAP | Senior Implementation Engineer | www.linkedin.com/in/gaurav-pandey-8291092267gap
    Terms & ConditionsAccessibility statement