How do I move the position of the 'statement' from besider a slider question, to underneath the bar? | Experience Community
Skip to main content
Solved

How do I move the position of the 'statement' from besider a slider question, to underneath the bar?

  • August 8, 2022
  • 1 reply
  • 242 views
B

Hi! I'm trying to move the position of the the statement beside the slider question to underneath the bar and labels. What code could work for this? Here's what it looks like currently; I'm trying to move 'political beliefs' to center, below the bar.
Screen Shot 2022-08-08 at 4.58.40 PM.png

Best answer by Tom_1842

Hi there, if you have only 1 statement in your slider question, you can use the below JS:
jQuery("#"+this.questionId+" .statement").insertAfter('table.sliderGrid.Slider');
jQuery("#"+this.questionId+" .statement").css("text-align","center");
If you have more than 1 statement in your slider question, I was able to get it to work on my end by using more specific selectors. The below worked for me where each statement corresponds to a different 'nth-child':
jQuery("#"+this.questionId+" > div.Inner.BorderColor.HSLIDER > div > fieldset > div > div > div:nth-child(2) > div").insertAfter("#"+this.questionId+" > div.Inner.BorderColor.HSLIDER > div > fieldset > div > div > div:nth-child(2)");

jQuery("#"+this.questionId+" > div.Inner.BorderColor.HSLIDER > div > fieldset > div > div > div:nth-child(4) > div").insertAfter("#"+this.questionId+" > div.Inner.BorderColor.HSLIDER > div > fieldset > div > div > div:nth-child(4)");

jQuery("#"+this.questionId+" > div.Inner.BorderColor.HSLIDER > div > fieldset > div > div > div:nth-child(6) > div").insertAfter("#"+this.questionId+" > div.Inner.BorderColor.HSLIDER > div > fieldset > div > div > div:nth-child(6)");

jQuery("#"+this.questionId+" .statement").css("text-align","center");

1 reply

Tom_1842
Level 8 ●●●●●●●●
Forum|alt.badge.img+28
  • Tom_1842
  • Level 8 ●●●●●●●●
  • Answer
  • August 9, 2022

Hi there, if you have only 1 statement in your slider question, you can use the below JS:
jQuery("#"+this.questionId+" .statement").insertAfter('table.sliderGrid.Slider');
jQuery("#"+this.questionId+" .statement").css("text-align","center");
If you have more than 1 statement in your slider question, I was able to get it to work on my end by using more specific selectors. The below worked for me where each statement corresponds to a different 'nth-child':
jQuery("#"+this.questionId+" > div.Inner.BorderColor.HSLIDER > div > fieldset > div > div > div:nth-child(2) > div").insertAfter("#"+this.questionId+" > div.Inner.BorderColor.HSLIDER > div > fieldset > div > div > div:nth-child(2)");

jQuery("#"+this.questionId+" > div.Inner.BorderColor.HSLIDER > div > fieldset > div > div > div:nth-child(4) > div").insertAfter("#"+this.questionId+" > div.Inner.BorderColor.HSLIDER > div > fieldset > div > div > div:nth-child(4)");

jQuery("#"+this.questionId+" > div.Inner.BorderColor.HSLIDER > div > fieldset > div > div > div:nth-child(6) > div").insertAfter("#"+this.questionId+" > div.Inner.BorderColor.HSLIDER > div > fieldset > div > div > div:nth-child(6)");

jQuery("#"+this.questionId+" .statement").css("text-align","center");

    Terms & ConditionsAccessibility statement