How do i align the stars in the center? | XM Community
Skip to main content
Solved

How do i align the stars in the center?

  • December 16, 2019
  • 2 replies
  • 371 views

Forum|alt.badge.img
i tried the code mentioned but it has an offset and changing values does not work. .Skin .ylabel { width: 37%; } !

Best answer by Tom_1842

Hi there, if you still need, I was able to put this in place by adapting TomG's code in this post. It puts the stars on a row beneath the statements. I then added CSS to center the statements and stars.
StarCenter.pngFirst, create a slider question and change the type to "Stars". Set the number of statements to 3 and the number of stars to 7. Write in some question text and then use the Rich Content Editor to center the text.
Next, add the below to the question's JavaScript in the OnReady section
jQuery("#"+this.questionId+" tr").each(function() {
    var row = jQuery(this);
    var th = row.before("").find("th").attr("colspan","4").css({"text-align":"center", "padding-top":"30px"});
    row.prev("tr").append(th);
  });
Finally, add the below CSS to the Style section of the survey's Look & Feel
.Skin .Slider .STAR .horizontalbar table.sliderGrid tr td.value {
  display: none !important;
}

div.Inner.BorderColor.STAR > div > fieldset > div > div.horizontalbar.ChoiceStructure.Stars > table > thead > tr:nth-child(1) {
display: none !important;
}

.Skin .STAR .Stars tbody tr {
display: flex !important;
 flex-wrap: wrap !important;
 justify-content: center !important;
}

.Skin .STAR .StarsContainer {
left: -119px;
}
The 'left' bit in the last line will need to be adjusted depending on how many stars are there. -119 looks good for 7 stars and -85 looked good for 5.

View original

2 replies

Tom_1842
Level 8 ●●●●●●●●
Forum|alt.badge.img+28
  • Level 8 ●●●●●●●●
  • 876 replies
  • Answer
  • December 16, 2022

Hi there, if you still need, I was able to put this in place by adapting TomG's code in this post. It puts the stars on a row beneath the statements. I then added CSS to center the statements and stars.
StarCenter.pngFirst, create a slider question and change the type to "Stars". Set the number of statements to 3 and the number of stars to 7. Write in some question text and then use the Rich Content Editor to center the text.
Next, add the below to the question's JavaScript in the OnReady section
jQuery("#"+this.questionId+" tr").each(function() {
    var row = jQuery(this);
    var th = row.before("").find("th").attr("colspan","4").css({"text-align":"center", "padding-top":"30px"});
    row.prev("tr").append(th);
  });
Finally, add the below CSS to the Style section of the survey's Look & Feel
.Skin .Slider .STAR .horizontalbar table.sliderGrid tr td.value {
  display: none !important;
}

div.Inner.BorderColor.STAR > div > fieldset > div > div.horizontalbar.ChoiceStructure.Stars > table > thead > tr:nth-child(1) {
display: none !important;
}

.Skin .STAR .Stars tbody tr {
display: flex !important;
 flex-wrap: wrap !important;
 justify-content: center !important;
}

.Skin .STAR .StarsContainer {
left: -119px;
}
The 'left' bit in the last line will need to be adjusted depending on how many stars are there. -119 looks good for 7 stars and -85 looked good for 5.


Forum|alt.badge.img
Tom_1842 wrote:

Hi there, if you still need, I was able to put this in place by adapting TomG's code in this post. It puts the stars on a row beneath the statements. I then added CSS to center the statements and stars.
StarCenter.pngFirst, create a slider question and change the type to "Stars". Set the number of statements to 3 and the number of stars to 7. Write in some question text and then use the Rich Content Editor to center the text.
Next, add the below to the question's JavaScript in the OnReady section
jQuery("#"+this.questionId+" tr").each(function() {
    var row = jQuery(this);
    var th = row.before("").find("th").attr("colspan","4").css({"text-align":"center", "padding-top":"30px"});
    row.prev("tr").append(th);
  });
Finally, add the below CSS to the Style section of the survey's Look & Feel
.Skin .Slider .STAR .horizontalbar table.sliderGrid tr td.value {
  display: none !important;
}

div.Inner.BorderColor.STAR > div > fieldset > div > div.horizontalbar.ChoiceStructure.Stars > table > thead > tr:nth-child(1) {
display: none !important;
}

.Skin .STAR .Stars tbody tr {
display: flex !important;
 flex-wrap: wrap !important;
 justify-content: center !important;
}

.Skin .STAR .StarsContainer {
left: -119px;
}
The 'left' bit in the last line will need to be adjusted depending on how many stars are there. -119 looks good for 7 stars and -85 looked good for 5.

This is awesome! For my survey I didn’t want any statement text, just the question on top. So I left the statement text next to the stars and just typed a space. Then adjusted the CSS to left: -95px and it worked a charm! 


Leave a Reply