diff --git a/corsscripts/sortable.css b/corsscripts/sortable.css
index 66570e5f6c105a7b49b214b7bbdd2df6d436ade5..c7585fd58049cee6a35f1ac8ed57d6194b8e90cf 100644
--- a/corsscripts/sortable.css
+++ b/corsscripts/sortable.css
@@ -105,7 +105,7 @@ button {
width: 150px;
}
-.usedList:empty {
+.usedList.empty {
height: 50px;
background-color: floralwhite; border: 1px solid rgb(155, 199, 206);
padding: 10px;
diff --git a/corsscripts/sortable.min.css b/corsscripts/sortable.min.css
index ad854424b330d8ff094a502fadc7f1b6559a2775..674e41b1305e7631b898804e74707c187dded9ef 100644
--- a/corsscripts/sortable.min.css
+++ b/corsscripts/sortable.min.css
@@ -1,2 +1,2 @@
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css");@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");@import url("../styles.css");body{background-color:inherit;}
-button{margin:2px 3px;}.container{display:flex;flex-wrap:wrap;}.usedList>li[data-id]{background-color:rgb(176,221,228);border-left:thick solid rgb(155,199,206);float:left;flex-shrink:1;}.usedList.col-rigid>li[data-id]{margin-left:0;}.row{margin-right:0;margin-left:0;margin-bottom:0;}.col-rigid{width:175px;flex:0 0 auto;display:inline-block}#availableList>li{background-color:rgb(243,189,88);float:left;}#availableList:empty{height:50px;background-color:lightpink;}#availableList>.sortable-chosen{box-shadow:0px 0px 0px 3px rgb(226,150,9)inset;}.usedList>.sortable-chosen{box-shadow:0px 0px 0px 3px rgb(155,199,206)inset;}.usedList>.header{height:50px;background-color:inherit;text-align:center;border-bottom:thick solid;padding:10px;display:inline-block;}.usedList>.index{background-color:inherit;text-align:left;border-right:thick solid;display:inline-block;margin-right:12px;}#availableList>.header{min-height:50px;height:auto;width:max(100%,150px);background-color:inherit;text-align:center;border-bottom:thick solid rgb(196,131,10);padding:10px;display:inline-block;}#availableList>.index{min-height:50px;height:auto;background-color:inherit;text-align:left;border-right:thick solid rgb(196,131,10);padding:10px;margin:12px;}.grid-item{height:50px;background-color:#fff;border:solid 1px rgb(0,0,0,0.2);padding:10px;margin:12px;display:flex;text-align:center;}.grid-item-rigid{height:50px;width:150px;background-color:#fff;border:solid 1px rgb(0,0,0,0.2);padding:10px;margin:12px;display:flex;text-align:center;}#availableList>.grid-item-rigid.index{width:150px;}.usedList:empty{height:50px;background-color:floralwhite;border:1px solid rgb(155,199,206);padding:10px;margin:12px;text-align:center;display:flex;}.usedList.col-rigid:empty{width:150px;}.parsons-button{display:inline-flex;align-items:center;padding:0.5rem 0.75rem;margin:2px 2px;font-size:25px;line-height:1.5;text-align:center;white-space:nowrap;vertical-align:middle;user-select:none;cursor:pointer;background-color:#6c757d;border:1px solid#6c757d;color:#ffffff;border-radius:0.35rem;transition:color 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out;}.parsons-button:hover{background-color:#5a6268;border-color:#545b62;color:#ffffff;}.parsons-bin{width:33%;cursor:default;}.bin-icon{margin-right:0.75rem;}.drop-zone{vertical-align:middle;display:inline-flex;flex:1;border:2px dashed#6c757d;border-radius:0.25rem;background-color:lightgray;align-self:stretch;}.drop-zone>li{font-size:0.75rem;background-color:lightcoral;max-height:100%;max-width:100%;text-align:left;flex:1;box-shadow:0px 0px 0px 2px rgb(167,89,89)inset;}.sortable-warning{float:right;font-size:0.8em;margin:-0.3em-0.3em;}
\ No newline at end of file
+button{margin:2px 3px;}.container{display:flex;flex-wrap:wrap;}.usedList>li[data-id]{background-color:rgb(176,221,228);border-left:thick solid rgb(155,199,206);float:left;flex-shrink:1;}.usedList.col-rigid>li[data-id]{margin-left:0;}.row{margin-right:0;margin-left:0;margin-bottom:0;}.col-rigid{width:175px;flex:0 0 auto;display:inline-block}#availableList>li{background-color:rgb(243,189,88);float:left;}#availableList:empty{height:50px;background-color:lightpink;}#availableList>.sortable-chosen{box-shadow:0px 0px 0px 3px rgb(226,150,9)inset;}.usedList>.sortable-chosen{box-shadow:0px 0px 0px 3px rgb(155,199,206)inset;}.usedList>.header{height:50px;background-color:inherit;text-align:center;border-bottom:thick solid;padding:10px;display:inline-block;}.usedList>.index{background-color:inherit;text-align:left;border-right:thick solid;display:inline-block;margin-right:12px;}#availableList>.header{min-height:50px;height:auto;width:max(100%,150px);background-color:inherit;text-align:center;border-bottom:thick solid rgb(196,131,10);padding:10px;display:inline-block;}#availableList>.index{min-height:50px;height:auto;background-color:inherit;text-align:left;border-right:thick solid rgb(196,131,10);padding:10px;margin:12px;}.grid-item{height:50px;background-color:#fff;border:solid 1px rgb(0,0,0,0.2);padding:10px;margin:12px;display:flex;text-align:center;}.grid-item-rigid{height:50px;width:150px;background-color:#fff;border:solid 1px rgb(0,0,0,0.2);padding:10px;margin:12px;display:flex;text-align:center;}#availableList>.grid-item-rigid.index{width:150px;}.usedList.empty{height:50px;background-color:floralwhite;border:1px solid rgb(155,199,206);padding:10px;margin:12px;text-align:center;display:flex;}.usedList.col-rigid:empty{width:150px;}.parsons-button{display:inline-flex;align-items:center;padding:0.5rem 0.75rem;margin:2px 2px;font-size:25px;line-height:1.5;text-align:center;white-space:nowrap;vertical-align:middle;user-select:none;cursor:pointer;background-color:#6c757d;border:1px solid#6c757d;color:#ffffff;border-radius:0.35rem;transition:color 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out;}.parsons-button:hover{background-color:#5a6268;border-color:#545b62;color:#ffffff;}.parsons-bin{width:33%;cursor:default;}.bin-icon{margin-right:0.75rem;}.drop-zone{vertical-align:middle;display:inline-flex;flex:1;border:2px dashed#6c757d;border-radius:0.25rem;background-color:lightgray;align-self:stretch;}.drop-zone>li{font-size:0.75rem;background-color:lightcoral;max-height:100%;max-width:100%;text-align:left;flex:1;box-shadow:0px 0px 0px 2px rgb(167,89,89)inset;}.sortable-warning{float:right;font-size:0.8em;margin:-0.3em-0.3em;}
\ No newline at end of file
diff --git a/corsscripts/stacksortable.js b/corsscripts/stacksortable.js
index 8043c78bedfbf566e64786fe47839cb59831323d..6570642a5ba77ef5879e99cfd0619544ba597e77 100644
--- a/corsscripts/stacksortable.js
+++ b/corsscripts/stacksortable.js
@@ -292,6 +292,7 @@ export function get_iframe_height() {
* @method generate_available - Generates the available list based on the current state.
* @method generate_used - Generates the used list based on the current state.
* @method update_state - Updates the state based on changes in the used and available lists.
+ * @method resize_grid_items - Resizes the height of divs with `grid-item` class according to the max height across grid items.
* @method validate_options - Validates the sortable user options.
*
* @example
@@ -371,7 +372,7 @@ export const stack_sortable = class stack_sortable {
if (val !== "") {this.item_height_width["style"] += `${key}:${val}px;`};
};
this.item_height_width = (this.item_height_width["style"] === "") ? {} : this.item_height_width;
- this.container_height_width = (this.item_height_width["style"] !== "") ?
+ this.container_height_width = (Object.keys(this.item_height_width).length !== 0) ?
{"style" : this.item_height_width["style"] + "margin: 12px;"} : {};
this.state = this._generate_state(this.steps, inputId, Number(this.columns), Number(this.rows));
if (inputId !== null) {
@@ -540,9 +541,9 @@ export const stack_sortable = class stack_sortable {
divRowCol.id = rowColId;
// In matching mode, we need to add rigid styles to colDivs if orientation === "row"
if (this.orientation === "row") {
- divRowCol.classList.add(...itemClassList, ...["col-rigid"]);
+ divRowCol.classList.add(...itemClassList, ...["empty", "col-rigid"]);
} else {
- divRowCol.classList.add(...itemClassList);
+ divRowCol.classList.add(...itemClassList, ...["empty"]);
}
colDiv.append(divRowCol);
})
@@ -591,6 +592,31 @@ export const stack_sortable = class stack_sortable {
}
}
+ /**
+ * Resizes all grid-item heights according to the maximum content height across all grid-items, adding an extra `10px` padding.
+ * Avoids affecting proof mode by virtue of grid-item and grid-item-rigid classes not being used there.
+ *
+ * @method
+ * @returns {void}
+ */
+ resize_grid_items() {
+ const allGridItems = document.querySelectorAll('.grid-item, .grid-item-rigid');
+ const maxHeight = Math.max(...[...allGridItems].map((item) => item.scrollHeight));
+ const maxWidth = Math.max(...[...allGridItems].map((item) => item.clientWidth));
+ // In grid fixed grid mode we also need to resize the individual item containers.
+ if (this.rows !== "" && this.columns !== "") {
+ for (const [i, value] of this.state.used.entries())
+ for (const [j, val] of value.entries()) {
+ this._apply_attrs(this.used[i][j], {'style' : 'height: ' + `${maxHeight + 10}px;` + 'margin: 12px;'});
+ }
+ }
+ // In all cases resize all grid-item or grid-item-rigid divs.
+ allGridItems.forEach((item) => {
+ item.style.height = `${maxHeight + 10}px`;
+ //item.style.width = `${maxWidth + 10}px`;
+ });
+ }
+
/**
* Updates the state based on changes in the used and available lists.
*
@@ -606,6 +632,13 @@ export const stack_sortable = class stack_sortable {
this.input.dispatchEvent(new Event("change"));
}
this.state = newState;
+
+ const empties = document.querySelectorAll('.empty');
+ empties.forEach((div) => {if (!this._is_empty(div)) {
+ div.classList.remove('empty');
+ div.style.height = '';
+ div.style.margin = '';
+ }})
}
/**
@@ -766,7 +799,7 @@ export const stack_sortable = class stack_sortable {
* @returns {boolean} - True if the list item is deletable, otherwise false.
*/
_deletable_li(li) {
- return !li.matches(".header") && !li.matches(".index") && !this._is_empty_li(li);
+ return !li.matches(".header") && !li.matches(".index") && !this._is_empty(li);
}
/**
@@ -975,13 +1008,13 @@ export const stack_sortable = class stack_sortable {
}
/**
- * Checks if a list item (li) element is empty.
+ * Checks if an element is empty.
*
- * @param {HTMLElement} li - The list item (li) element to check.
- * @returns {boolean} - True if the list item is empty, otherwise false.
+ * @param {HTMLElement} el - The element to check.
+ * @returns {boolean} - True if the element is empty, otherwise false.
*/
- _is_empty_li(li) {
- return li.textContent.trim() === "" && li.children.length === 0;
+ _is_empty(el) {
+ return el.textContent.trim() === "" && el.children.length === 0;
}
/**
diff --git a/corsscripts/stacksortable.min.js b/corsscripts/stacksortable.min.js
index a6211622495424789aef421ac3422a6a3f08ba2f..ebda1e95d60dcb523078538eb7a5d6865a3d4ed0 100644
--- a/corsscripts/stacksortable.min.js
+++ b/corsscripts/stacksortable.min.js
@@ -14,7 +14,7 @@ function _validate_flat_steps(steps){if(typeof(steps)=="string"){steps=_stackstr
return Object.values(steps).every((val)=>typeof(val)=="string");}
function _validate_top_level_keys_JSON(JSON,validKeys,requiredKeys){const keys=Object.keys(JSON);const missingRequiredKeys=requiredKeys.filter((key)=>!keys.includes(key));const invalidKeys=keys.filter((key)=>!validKeys.includes(key));return invalidKeys.length===0&&missingRequiredKeys.length===0;}
export function get_iframe_height(){return document.documentElement.offsetHeight;}
-export const stack_sortable=class stack_sortable{constructor(steps,inputId=null,options=null,clone=false,columns=1,rows=null,orientation="col",index="",grid=false,item_height=null,item_width=null){this.steps=steps;this.inputId=inputId;this.orientation=orientation;this.columns=((this.orientation==="col")?columns:rows);this.rows=((this.orientation==="col")?rows:columns);this.index=index;this.use_index=this.index!=="";this.grid=grid;this.item_class=(this.grid?(this.orientation==="row"?"grid-item-rigid":"grid-item"):"list-group-item");this.item_height_width={"style":""};for(const[key,val]of[["height",item_height],["width",item_width]]){if(val!==""){this.item_height_width["style"]+=`${key}:${val}px;`};};this.item_height_width=(this.item_height_width["style"]==="")?{}:this.item_height_width;this.container_height_width=(this.item_height_width["style"]!=="")?{"style":this.item_height_width["style"]+"margin: 12px;"}:{};this.state=this._generate_state(this.steps,inputId,Number(this.columns),Number(this.rows));if(inputId!==null){this.input=document.getElementById(this.inputId);this.submitted=this.input.getAttribute("readonly")==="readonly"}
+export const stack_sortable=class stack_sortable{constructor(steps,inputId=null,options=null,clone=false,columns=1,rows=null,orientation="col",index="",grid=false,item_height=null,item_width=null){this.steps=steps;this.inputId=inputId;this.orientation=orientation;this.columns=((this.orientation==="col")?columns:rows);this.rows=((this.orientation==="col")?rows:columns);this.index=index;this.use_index=this.index!=="";this.grid=grid;this.item_class=(this.grid?(this.orientation==="row"?"grid-item-rigid":"grid-item"):"list-group-item");this.item_height_width={"style":""};for(const[key,val]of[["height",item_height],["width",item_width]]){if(val!==""){this.item_height_width["style"]+=`${key}:${val}px;`};};this.item_height_width=(this.item_height_width["style"]==="")?{}:this.item_height_width;this.container_height_width=(Object.keys(this.item_height_width).length!==0)?{"style":this.item_height_width["style"]+"margin: 12px;"}:{};this.state=this._generate_state(this.steps,inputId,Number(this.columns),Number(this.rows));if(inputId!==null){this.input=document.getElementById(this.inputId);this.submitted=this.input.getAttribute("readonly")==="readonly"}
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);}});}
@@ -25,13 +25,16 @@ add_index(index){for(const[i,value]of index.entries()){if(i===0){var idx=this._c
document.getElementById("index").append(idx);}}
add_reorientation_button(){var btn=document.createElement("button");btn.id="orientation";btn.setAttribute("class","parsons-button");var icon=document.createElement("i");icon.setAttribute("class","fa fa-refresh");btn.append(icon);btn.addEventListener("click",()=>this._flip_orientation());document.body.insertBefore(btn,document.getElementById("containerRow"));}
create_row_col_divs(){var usedClassList=(!this.grid||this.orientation==="col")?(["list-group",this.orientation,"usedList"]):([this.orientation,"usedList"]);var itemClass=(this.orientation==="col")?"row":"col";var itemClassList=[itemClass,"usedList"];var availClassList=(!this.grid||this.orientation==="col")?["list-group",this.orientation]:[this.orientation];var container=document.getElementById("containerRow");if(this.use_index){var indexCol=document.createElement("div");indexCol.id="index";indexCol.classList.add(...usedClassList);container.append(indexCol);}
-this.colIds.forEach((id)=>{var colDiv=document.createElement("ul");colDiv.id=id;colDiv.classList.add(...usedClassList);container.append(colDiv);});if(this.rows!==""){this.colIds.forEach((colId)=>{var colDiv=document.getElementById(colId);colDiv.classList.add("container");this.rowColIds[colId].forEach((rowColId)=>{var divRowCol=document.createElement("li");divRowCol.id=rowColId;if(this.orientation==="row"){divRowCol.classList.add(...itemClassList,...["col-rigid"]);}else{divRowCol.classList.add(...itemClassList);}
+this.colIds.forEach((id)=>{var colDiv=document.createElement("ul");colDiv.id=id;colDiv.classList.add(...usedClassList);container.append(colDiv);});if(this.rows!==""){this.colIds.forEach((colId)=>{var colDiv=document.getElementById(colId);colDiv.classList.add("container");this.rowColIds[colId].forEach((rowColId)=>{var divRowCol=document.createElement("li");divRowCol.id=rowColId;if(this.orientation==="row"){divRowCol.classList.add(...itemClassList,...["empty","col-rigid"]);}else{divRowCol.classList.add(...itemClassList,...["empty"]);}
colDiv.append(divRowCol);})})};var availDiv=document.createElement("ul");availDiv.id=this.ids.available;availDiv.classList.add(...availClassList);if(this.orientation==="col"){container.append(availDiv);}else{container.insertBefore(availDiv,container.firstChild);}
this.used=this.usedId.map(idList=>idList.map(id=>document.getElementById(id)));this.available=document.getElementById(this.availableId);}
generate_available(){this.state.available.forEach(key=>this.available.append(this._create_li(key,this.item_height_width)));}
generate_used(){for(const[i,value]of this.state.used.entries()){if(this.rows!==""&&this.columns!==""){for(const[j,val]of value.entries()){this._apply_attrs(this.used[i][j],this.container_height_width);val.forEach(key=>this.used[i][j].append(this._create_li(key,this.item_height_width)));}}else{value[0].forEach(key=>this.used[i][0].append(this._create_li(key,this.item_height_width)));}}}
+resize_grid_items(){const allGridItems=document.querySelectorAll('.grid-item, .grid-item-rigid');const maxHeight=Math.max(...[...allGridItems].map((item)=>item.scrollHeight));const maxWidth=Math.max(...[...allGridItems].map((item)=>item.clientWidth));if(this.rows!==""&&this.columns!==""){for(const[i,value]of this.state.used.entries())
+for(const[j,val]of value.entries()){this._apply_attrs(this.used[i][j],{'style':'height: '+`${maxHeight+10}px;`+'margin: 12px;'});}}
+allGridItems.forEach((item)=>{item.style.height=`${maxHeight+10}px`;});}
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;}
+this.state=newState;const empties=document.querySelectorAll('.empty');empties.forEach((div)=>{if(!this._is_empty(div)){div.classList.remove('empty');div.style.height='';div.style.margin='';}})}
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(", ")+".";}
@@ -42,7 +45,7 @@ _create_ids(rows,columns){var colIdx=Array.from({length:columns},(_,i)=>i);var r
colIdx.forEach((i)=>this.rowColIds[this.colIds[i]]=rowIdx.map((j)=>`usedList_${j}${i}`));var usedIds=(rows==="")?this.colIds.map((id)=>[id]):Object.values(this.rowColIds);return{used:usedIds,available:"availableList"};}
_create_index(innerHTML,id,attrs){let i=document.createElement("i");i.innerHTML=innerHTML;var addClass=(this.orientation==="col")?[this.item_class,"index"]:[this.item_class,"header"];i.classList.add(...addClass);this._apply_attrs(i,{...{"id":id},...attrs});return i;}
_create_li(stepKey,attrs){let li=document.createElement("li");li.innerHTML=this.steps[stepKey];this._apply_attrs(li,{...{"data-id":stepKey},...attrs});li.className=this.item_class;return li;}
-_deletable_li(li){return!li.matches(".header")&&!li.matches(".index")&&!this._is_empty_li(li);}
+_deletable_li(li){return!li.matches(".header")&&!li.matches(".index")&&!this._is_empty(li);}
_delete_all_from_used(){const lis=document.querySelectorAll(".usedList li[data-id]");lis.forEach(li=>{if(this._deletable_li(li)){this._delete_li(li);}});}
_delete_li(li){li.parentNode.removeChild(li);}
_display_warning(msg){var warning=document.createElement("div");warning.className="sortable-warning";var exclamation=document.createElement("i");exclamation.className="icon fa fa-exclamation-circle text-danger fa-fw";warning.append(exclamation);var warningMessage=document.createElement("span");warningMessage.textContent=msg;warning.append(warningMessage);document.body.insertBefore(warning,document.getElementById("containerRow"));}
@@ -57,7 +60,7 @@ _generate_state(steps,inputId,columns,rows){const usedState=(rows===0||columns==
return(stateStore.value&&stateStore.value!="")?JSON.parse(stateStore.value):{used:usedState,available:[...Object.keys(steps)]};}
_get_moveable_parent_li(target){var li=target;while(!li.matches(".list-group-item")){li=li.parentNode;}
return li;}
-_is_empty_li(li){return li.textContent.trim()===""&&li.children.length===0;}
+_is_empty(el){return el.textContent.trim()===""&&el.children.length===0;}
_set_ghostClass_group_and_disabled_options(){var group_val={};group_val.used=(this.rows==="")?{name:"sortableUsed",pull:true,put:true}:{name:"sortableUsed",pull:true,put:(to)=>to.el.children.length<1};group_val.available=(this.clone==="true")?{name:"sortableAvailable",pull:"clone",revertClone:true,put:false}:{name:"sortableAvailable",put:true};var options_to_assign=this.submitted?{used:{ghostClass:"list-group-item-info",group:group_val.used,disabled:true},available:{ghostClass:"list-group-item-info",group:group_val.available,disabled:true}}:{used:{ghostClass:"list-group-item-info",group:group_val.used},available:{ghostClass:"list-group-item-info",group:group_val.available}}
var options={used:Object.assign(Object.assign({},this.userOptions.used),options_to_assign.used),available:Object.assign(Object.assign({},this.userOptions.available),options_to_assign.available)};return options;}
_set_user_options(options){var userOptions;if(options===null){userOptions=this.defaultOptions;}else{userOptions={used:Object.assign(this.defaultOptions.used,options.used),available:Object.assign(this.defaultOptions.available,options.available)};}
diff --git a/stack/cas/castext2/blocks/parsons.block.php b/stack/cas/castext2/blocks/parsons.block.php
index 6b29c5415ea6c98d1f1e5b4d43c40203f84e3181..8b4a8a68326e8a7a96b96c04986a9fa5a0ab6471 100644
--- a/stack/cas/castext2/blocks/parsons.block.php
+++ b/stack/cas/castext2/blocks/parsons.block.php
@@ -342,8 +342,12 @@ class stack_cas_castext2_parsons extends stack_cas_castext2_block {
// Resize the outer iframe if the author does not pre-define width. Method depends on MathJax 2 or MathJax 3.
if (!$existsuserheight) {
$code .= ($mathjaxversion === "2") ?
- 'MathJax.Hub.Queue(() => {stack_js.resize_containing_frame("' . $width . '", get_iframe_height() + "px");})' :
- 'mathJaxPromise.then(() => {stack_js.resize_containing_frame("' . $width . '", get_iframe_height() + "px");});';
+ 'MathJax.Hub.Queue(() => {
+ stackSortable.resize_grid_items();
+ stack_js.resize_containing_frame("' . $width . '", get_iframe_height() + "px");})' :
+ 'mathJaxPromise.then(() => {
+ stackSortable.resize_grid_items();
+ stack_js.resize_containing_frame("' . $width . '", get_iframe_height() + "px");});';
$code .= "\n";
}