Minimizing padding on several elements using javascript | XM Community
Skip to main content

Hello there,

I want to save up vertical space by minimizing unnecessary padding in three elements on the page. Using my browser's Inspector Mode, I was able to figure out which items are relevant for my purpose. However, I can't adjust them as needed. 

  • div.Inner.BorderColor.TB
    has 
    padding
    of 10px which I'd like to change to 0px

div.Inner.BorderColor.TB.png
  • div.Inner.BorderColor.SAHR
    has 
    padding
    of 10px which I'd like to change to 0px

div.Inner.BorderColor.SAHR.png
  • div.QuestionText.BorderColor
    has 
    Margin
    of 15px which I'd like to change to 0px

div.QuestionText.BorderColor.png
Since I need to change to take place only on several pages but not in the entire survey, I'm looking for a question-based solution, which will probably rely on JavaScript using jQuery . I've tried, for example: 
jQuery("#"+this.questionId+" div.Inner.BorderColor.TB").css({"padding": "0px"});

and also without the "
div
": 
jQuery("#"+this.questionId+" Inner.BorderColor.TB").css({"padding": "0px"});

Unfortunately, neither of those worked out.

Any idea?

Not sure why the first one didn't work, but you don't need to be that specific. The second one is wrong because "Inner" is a class, so it must be preceded by a ".".
It would be easier if you do it on a page basis instead of each individual question. That way you can attach the JS to one question on the page.
Try:
Qualtrics.SurveyEngine.addOnload(function() {
jQuery(".Inner").css("padding","0px");
jQuery(".QuestionText").css("margin","0px");
});

Thanks TomG !

Leave a Reply


Terms & Conditions