Hamburger Icon on Drag & Drop question | XM Community
Skip to main content
Solved

Hamburger Icon on Drag & Drop question

  • April 28, 2023
  • 2 replies
  • 94 views
BetterB
Level 2 ●●
Forum|alt.badge.img+7

Hello! 

I am looking to modify our drag and drop answers on a ranking question to include the hamburger icon like the image below. Is this possible? Or am I overlooking something?

Thanks for any help!

 

 

Best answer by Tom_1842

Neat code! I tweaked it a bit so that the hamburger icon could display a little larger.

HTML of rank order answer option:

<div style="height:100%;line-height:100%;cursor:move">
<span>Tooling Timing</span>
<span style="float:right;font-size:40px">&equiv;</span>
</div>

JS:

jQuery("span.LabelWrapper label > span").css({"width":"95%","margin-top":"3px"});
jQuery(".ui-sortable-handle span.label").css({"width":"95%","margin-top":"3px"});

 

PeeyushBansal

2 replies

Shashi
Level 8 ●●●●●●●●
Forum|alt.badge.img+34
  • Shashi
  • Level 8 ●●●●●●●●
  • April 29, 2023

Try the below method.

HTML of rank order question option:

<div><span style="float:left">Tooling Timing</span><span style="float:right;">≡</span></div>

JS to be added on the question:

jQuery("span.LabelWrapper label > span").css("width","100%");
jQuery(".ui-sortable-handle span.label").css("width","100%");

 

BetterB
Tom_1842
Level 8 ●●●●●●●●
Forum|alt.badge.img+28
  • Tom_1842
  • Level 8 ●●●●●●●●
  • Answer
  • May 1, 2023

Neat code! I tweaked it a bit so that the hamburger icon could display a little larger.

HTML of rank order answer option:

<div style="height:100%;line-height:100%;cursor:move">
<span>Tooling Timing</span>
<span style="float:right;font-size:40px">&equiv;</span>
</div>

JS:

jQuery("span.LabelWrapper label > span").css({"width":"95%","margin-top":"3px"});
jQuery(".ui-sortable-handle span.label").css({"width":"95%","margin-top":"3px"});

 

BetterB
Terms & ConditionsAccessibility statement