Minimizing padding on several elements using javascript | XM Community
Solved

Minimizing padding on several elements using javascript

E

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?

icon

Best answer by TomG 5 May 2020, 15:16

View original

2 replies

TomG
Rank
Userlevel 7
Badge +27

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

E

Thanks TomG !

Leave a Reply


Terms & Conditions