Reduce the gap between last question on page and the next page button | XM Community
Skip to main content
Hi. I'd like to put the next page button as close to below the last question on a page as possible to limit the scrolling effort. Any help w/ a css snippet greatly appreciated
Goto Custom CSS section... follow below page for it



https://www.qualtrics.com/support/survey-platform/survey-module/look-feel/advanced-look-feel-settings/#AddingCustomCSS



And, add below code

.Skin #Buttons {

text-align: right;

padding: 20px;

margin-top: -5px;

}



And, if you want to reduce more then try decrementing the value of "margin-top" attribute from -5px to -10px
Hello @Tom_R ,



The answer of @Mohammedali_Rajapakar_Ugam is correct, but that will add to all questions.

If you want to add to a particular question i.e to a page of the survey then paste the following code in the js(onLoad) of the question:



jQuery("#Buttons").css({"text-align": "right",

"padding": "20px",

"margin-top":"-5px"});
Thank you very much Shashi!
Shashi, I am getting an "unexpected token" error when I try to enter the javascript.



Qualtrics.SurveyEngine.addOnload(function()

{

jQuery("#Buttons").css({"text-align": "right",

"padding": "20px",

"margin-top":"-5px"});

});
> @Tom_R said:

> Shashi, I am getting an "unexpected token" error when I try to enter the javascript.

>

> Qualtrics.SurveyEngine.addOnload(function()

> {

> jQuery("#Buttons").css({"text-align": "right",

> "padding": "20px",

> "margin-top":"-5px"});

> });

>

>

>



paste the following code in the js(onLoad) of the question:



jQuery("#Buttons").css({"text-align": "right",

"padding": "20px",

"margin-top":"-5px"});
Hi @Mohammedali_Rajapakar_Ugam For some reason the CSS code added to the custom CSS section isn't making any difference. I am trying different values for padding and top margin and still the page forward button is in the same place I am using an older Qualtrics minimalist theme. I wouldn't think this would have anything to do with it, but thought I'd mention that. Thanks!
More... when I make the changes to the element right clicking on inspect in CHrome, it works. For some reason it dosen't work when adding it to the custom CSS section. Could something be over riding it? Using the Qualtrics 2014 minimalist theme
Is it possible to share qsf? Since it's working for me with the same theme "Qualtrics 2014 minimal"
Will do . - how can I share it with just you? As a general comment it seems like most of the Qualtrics themes make poor use of screen real estate. I found Qualtrics 2014 minimal to be the best
@Mohammedali_Rajapakar_Ugam I got it to work using your code when I switched order of the two ".Skin" statements below. (Didn't work when .Skin .PGR... was listed first.) Not sure why but your code



.Skin #Buttons {

text-align: center;

padding: 20px;

margin-top: -30px; ! important;

}



.Skin .PGR .DragAndDrop td.groupsContainerTd div > div {padding-bottom: 25px};
Hi @Mohammedali_Rajapakar_Ugam I found that when I changed the order the two statements below appeared, it worked. ( previously had ".Skin .PGR . ..." as the first entry in the CSS box) When I put ".Skin .PGR ..." below ".Skin#Buttons.." it worked



.Skin #Buttons {

text-align: center;

padding: 20px;

margin-top: -20px ;

}



.Skin .PGR .DragAndDrop td.groupsContainerTd div > div {padding-bottom: 25px};
I have added the following the the custom CSS option on look and feel but I am having no luck having that change the gap at all.



.Skin #Buttons {padding-top: 0px; margin-top: -15px; }

.Skin .QuestionBody{ padding-bottom: 0px; }



Any suggestions on what will work? I am ok doing this for all pages of the survey vs individual page.



!

Leave a Reply


Terms & Conditions