Remove / reduce spacing between horizontal choices | XM Community
Question

Remove / reduce spacing between horizontal choices

  • 13 November 2020
  • 6 replies
  • 145 views
T

I am trying to reduce the spacing between a set of horizontal choices on a 3-choice multiple choice question. I've tried narrowing the entire survey, as well as reducing the size of the buttons. No matter what I do, the spacing is retained (even with smaller buttons).
I think I'm close to isolating the .css element with inspect, and I've found a setting where the width of a table is 33.33..%.
I've tried a few things, and spent some time searching the forum, but can't quite get it, some attempts below:
.Skin .MC .MAHR table td, .Skin .MC .SAHR table td, .Skin .NPS table td {width: 10%!important;}
.Skin .MC .MAHR .QuestionBody td.LabelContainer.LabelContainer {width: 50px;}
Any help is appreciated.

6 replies

Tom_1842
Rank
Userlevel 7
Badge +27

Hi there, if you still need, this can be put in place by adding the below CSS to the Style section of the survey's Look & Feel. The top bit reduces the spacing on desktop, and the bottom bit reduces the spacing on mobile.
@media only screen and (min-width: 481px) {
.Skin .MC .ChoiceStructure {
    border-spacing: 1px !important;
}
}

@media only screen and (max-width: 480px) {
.Skin .MC .MAHR table td, .Skin .MC .SAHR table td {
    margin: 1px !important;
}
}
MC_AnswerSpacing.png

M
Badge +1

Hi Tom_1842,
I saw that your custom code works and was hoping whether you could help me out with the following:
Can you please provide me with a custom code that creates space in between two specific options in a multiple choice format (please see attached an example of the desired end state).
Thanks so much!
example.png

Tom_1842
Rank
Userlevel 7
Badge +27

Hi moralrebel , I think your end state is a bit more than creating space between answer options, but I was able to put something similar in place by first changing the Layout in the survey's Look & Feel to Classic and then adding the below to the OnReady section of the MC question's JavaScript, where "Neither" is the 3rd answer option.
var cont = jQuery(this.questionContainer);
var qid = this.questionId;
var opt3 = '#'+qid+' > div.Inner.BorderColor.SAHR > div > fieldset > div > table > tbody > tr > td:nth-child(3)';

jQuery(opt3).css({"width":"50%"});
jQuery(opt3).detach().appendTo(cont);
ButtonOutsideContainer.png

M
Badge +1

Hi Tom_1842,
Thank you very much! Unfortunately, I didn't get it to work so far, perhaps I implemented the code improperly?
I followed your instructions and changed the Layout to classic, and then in the multiple choice question's javascript replaced the " /*Place Your Javascript Here*/ " with the code you provided below the OnReady section (please see attached) but without luck..
Appreciate your help!
javascript code.png

Tom_1842
Rank
Userlevel 7
Badge +27

moralrebel your code looks good to me. Are you using a Multiple Choice question that is Answer Type = Allow one answer, Choices = 3, and Alignment = Horizontal?

M
Badge +1

Tom_1842 Adjusting the alignment from column to horizontal did the trick, thank you so much for your help!

Leave a Reply


Terms & Conditions