diff --git a/corsscripts/stacksortable.js b/corsscripts/stacksortable.js
index 32f1f5eb7772cb7667458727d611dc1b1f5817f6..9e0fe2d7d38a244873d132ebb4d01f5f0ef830dd 100644
--- a/corsscripts/stacksortable.js
+++ b/corsscripts/stacksortable.js
@@ -442,7 +442,7 @@ export const stack_sortable = class stack_sortable {
add_delete_all_listener(buttonId, newUsed, newAvailable) {
const button = document.getElementById(buttonId);
button.addEventListener("click", () => {
- this._delete_all_from_used(); this.update_state(newUsed, newAvailable);});
+ this._delete_all_from_used(); this.update_state(newUsed, newAvailable); this.update_grid_empty_css();});
}
/**
@@ -662,7 +662,7 @@ export const stack_sortable = class stack_sortable {
usedLists.forEach((el) => {if (this._is_empty(el)) {
el.classList.add('empty');
// We need to auto-resize the height again in this case.
- this._resize_set_height(el, this._resize_compute_max_height('.grid-item, .grid-item-rigid'));
+ this._resize_set_height(el, this._resize_compute_max_height('.grid-item, .grid-item-rigid') + 12);
}})
}
diff --git a/corsscripts/stacksortable.min.js b/corsscripts/stacksortable.min.js
index 7bcf9a7d34a227d6693dff880131ce201718106b..5d9114e656f0e4b00bf160878c6b5c3d19356fb1 100644
--- a/corsscripts/stacksortable.min.js
+++ b/corsscripts/stacksortable.min.js
@@ -20,7 +20,7 @@ this.item_height_width=(this.item_height_width["style"]==="")?{}:this.item_heigh
this.ids=this._create_ids(this.rows,this.columns);this.availableId=this.ids.available;this.usedId=this.ids.used;this.clone=clone;this.defaultOptions={used:{animation:50},available:{animation:50}};this.userOptions=this._set_user_options(options);this.options=this._set_ghostClass_group_and_disabled_options();}
add_dblclick_listeners(newUsed,newAvailable){this.available.addEventListener("dblclick",(e)=>{if(this._double_clickable(e.target)){var li=this._get_moveable_parent_li(e.target);li=(this.clone==="true")?li.cloneNode(true):this.available.removeChild(li);this.used[0][0].append(li);this.update_state(newUsed,newAvailable);}});this.used[0][0].addEventListener("dblclick",(e)=>{if(this._double_clickable(e.target)){var li=this._get_moveable_parent_li(e.target);this.used[0][0].removeChild(li);if(this.clone!=="true"){this.available.insertBefore(li,this.available.children[1]);}
this.update_state(newUsed,newAvailable);}});}
-add_delete_all_listener(buttonId,newUsed,newAvailable){const button=document.getElementById(buttonId);button.addEventListener("click",()=>{this._delete_all_from_used();this.update_state(newUsed,newAvailable);});}
+add_delete_all_listener(buttonId,newUsed,newAvailable){const button=document.getElementById(buttonId);button.addEventListener("click",()=>{this._delete_all_from_used();this.update_state(newUsed,newAvailable);this.update_grid_empty_css();});}
add_headers(headers,available_header){for(const[i,value]of headers.entries()){var parentEl=document.getElementById(`usedList_${i}`);var header=this._create_header(value,`usedHeader_${i}`,this.item_height_width);parentEl.insertBefore(header,parentEl.firstChild);}
var parentEl=document.getElementById("availableList");parentEl.insertBefore(this._create_header(available_header,"availableHeader",this.item_height_width),parentEl.firstChild);}
add_index(index){for(const[i,value]of index.entries()){if(i===0){var idx=this._create_index(value,`usedIndex_${i}`,this.item_height_width);var addClass=this.orientation==="col"?"header":"index";idx.classList.add(addClass);}else{var idx=this._create_index(value,`usedIndex_${i}`,this.item_height_width);}
@@ -36,7 +36,7 @@ resize_grid_items(){const maxHeight=this._resize_compute_max_height('.grid-item,
update_state(newUsed,newAvailable){var newState={used:newUsed.map((usedList)=>usedList.map((used)=>used.toArray())),available:newAvailable.toArray()};if(this.inputId!==null){this.input.value=JSON.stringify(newState);this.input.dispatchEvent(new Event("change"));}
this.state=newState;}
update_grid_empty_css(){const empties=document.querySelectorAll('.empty');empties.forEach((el)=>{if(!this._is_empty(el)){el.classList.remove('empty');el.style.height='';el.style.margin='';}})
-const usedLists=document.querySelectorAll('.usedList');usedLists.forEach((el)=>{if(this._is_empty(el)){el.classList.add('empty');this._resize_set_height(el,this._resize_compute_max_height('.grid-item, .grid-item-rigid'));}})}
+const usedLists=document.querySelectorAll('.usedList');usedLists.forEach((el)=>{if(this._is_empty(el)){el.classList.add('empty');this._resize_set_height(el,this._resize_compute_max_height('.grid-item, .grid-item-rigid')+12);}})}
validate_options(possibleOptionKeys,unknownErr,overwrittenErr){var err="";var keysRecognised=true;var invalidKeys=[];Object.keys(this.options.used).forEach(key=>{if(!this._validate_option_key(key,possibleOptionKeys)){keysRecognised=false;if(!invalidKeys.includes(key)){invalidKeys.push(key);}}});Object.keys(this.options.available).forEach(key=>{if(!this._validate_option_key(key,possibleOptionKeys)){keysRecognised=false;if(!invalidKeys.includes(key)){invalidKeys.push(key);}}});if(!keysRecognised){err+=unknownErr+invalidKeys.join(", ")+". ";}
var overwrittenKeys=[];var keysPreserved=true;["ghostClass","group","onSort"].forEach(key=>{if(Object.keys(this.userOptions.used).includes(key)||Object.keys(this.userOptions.available).includes(key))
{keysPreserved=false;overwrittenKeys.push(key);}});if(!keysPreserved){err+=overwrittenErr+overwrittenKeys.join(", ")+".";}
diff --git a/doc/en/Topics/Matching.md b/doc/en/Topics/Matching.md
index 52d7151be1fc40817d63468329f7583059b18f46..1b976a3e8412e2560b2c0b516de4a6b7c14d2dcb 100644
--- a/doc/en/Topics/Matching.md
+++ b/doc/en/Topics/Matching.md
@@ -72,6 +72,7 @@ See the examples below for more details.
## Item style
In **Grouping** and **Grid** configurations, the height and width of individual items will by default auto-resize so that all their heights and widths are set to contain the largest item content.
+This will also apply to headers and index items as well.
This can be overriden via the `item-height` and `item-width` header parameters. Parameter values should be a string containing a number, and this will set the pixels of the height/width.
The default is `50px` (`item-height="50"`) for height, and the width is automatically deduced from the page layout and number of columns for the vertical orientation, or it is `100px` (`item-width="100"`) for the horizontal configuration.
diff --git a/stack/cas/castext2/blocks/parsons.block.php b/stack/cas/castext2/blocks/parsons.block.php
index 172c6974cd9c64a38c14c87c04fdbe8ea067ba09..747589d28d63b6efc46aa9776ec2ccfa9e65788f 100644
--- a/stack/cas/castext2/blocks/parsons.block.php
+++ b/stack/cas/castext2/blocks/parsons.block.php
@@ -341,6 +341,9 @@ class stack_cas_castext2_parsons extends stack_cas_castext2_block {
$code .= 'stackSortable.add_dblclick_listeners(sortableUsed, sortableAvailable);' . "\n";
}
+ // Resize grid-items if window size is changed.
+ $code .= 'window.addEventListener("resize", () => stackSortable.resize_grid_items())' . "\n";
+
// Typeset MathJax. MathJax 2 uses Queue, whereas 3 works with promises.
$code .= ($mathjaxversion === "2") ?
'MathJax.Hub.Queue(["Typeset", MathJax.Hub]);' :