Question Styling: Drag and Drop Scale

This article will show you how to format/style items within this specific question type


See the article following article if you have not added JavaScript and/or CSS to a question


Adjust Tile Alignment on the Scale While Backing Up

Add the following to ADD JAVASCRIPT, and the tiles will be aligned properly.

/* ADJUST ALIGNMENT OF TILES ON SCALE WHEN BACKING UP */
cmSurvey.onLoad(function()
	{
		setTimeout(function()
		{
			jQuery(".cm-dd-scale-container .bucket .cm-dd-drag-item").css(
			{
				"bottom": "10px",
				"top": "inherit"
			});
		}, 10);
	});


Adjust Font Size and Color of Value and Value Indicator

Add the following to ADD CSS. You can adjust the color and font size as needed. 

/* VALUE AND INDICATOR AFTER DRAGGED */
.cm-dd-scale-container .indicatorValue .value {
  COLOR: BLUE !important; /* ADJUST COLOR HERE */ 
  FONT-SIZE: 1EM; /* ADJUST FONT SIZE HERE */ 
}

Adjust Font Size and Weight of Scale Text

Add the following to ADD CSS. You can adjust the font size and font weight as needed. 

/* SCALE TEXT STYLING */ 
.cm-dd-scale-container .rangeHeaders li {
    font-size: 16px;  /* ADJUST FONT SIZE HERE */ 
    font-weight: bold;  /* MAKE BOLD */
}

Shrink Tiles When Dragged

Add the following to ADD CSS. You can adjust the size and font weight as needed. 

/* VALUE AND INDICATOR AFTER DRAGGED */
.cm-dd-scale-container .indicatorValue .value {
  COLOR: BLUE !important;
  FONT-SIZE: 1EM;
}
/* SCALE TEXT */ 
.cm-dd-scale-container .rangeHeaders li {
    font-size: 16px;
    /* font-weight: bold; */
}
/* REMOVE SHADING ON DRAG ITEMS FOR V2 THEMES */
.cm-dd-drag-item {
    box-shadow: none; 
}
/* START: SHRINK TILES WHEN MOVING TO SCALE */ 
.cm-dd-drag-item {
background-color: transparent !important; /* YOU CAN MAKE THIS WHITE IF NEEDED */ 
border: none !important;
overflow: visible !important;
}
.cm-dd-drag-item:hover {
box-shadow: none !important;
}
.cm-dd-drag-item-content {
border: 1px solid rgb(210,210,210) !important;
}
.cm-dd-drag-item:hover .cm-dd-drag-item-content {
box-shadow: -2px 2px 5px 0px #d7d7d7, 0 2px 10px 0 #E7E7E7 !important;
}
.ui-draggable-dragging .cm-dd-drag-item-content,
.bucket .cm-dd-drag-item .cm-dd-drag-item-content {
width: 100px !important; /* ADJUST YOUR WIDTH HERE AFTER DRAGGED */ 
height: 125px !important;  /* ADJUST YOUR HEIGHT HERE AFTER DRAGGED */ 
line-height: 95px !important;
font-size: 10px !important;
margin: auto !important;
}
.ui-draggable-dragging img,
.bucket .cm-dd-drag-item img {
width: 100% !important;
}
/* END: SHRINK TILES WHEN MOVING TO SCALE */

Custom Drag Item Sizes Per Cell

You may have a scenario in which you have a long list of drag items but they are conditionally sized based on a cell or other variable assignment. Add the code below to the ADD CSS field of your question. 

Example: Cell 1 (items 1-10) images have a width of 100px wide while the Cell 2 (items 11-20) images have a width of 300px. 

NOTE: Your images need to be identically sized by cell or the drag items will not be identically sized. 

.cm-dd-drag-item {
  visibility: hidden;
}

.cm-dd-drag-item .cm-dd-drag-item-content__wrapper {
 visibility: visible;
  border: 1px solid rgb(210,210,210);
  border-radius: 4px;
  box-shadow: none;
}

.cm-dd-drag-item .cm-dd-drag-item-content__wrapper:hover {
  box-shadow: black;
}

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us