diff --git a/addons/web_editor/static/src/js/backend/convert_inline.js b/addons/web_editor/static/src/js/backend/convert_inline.js index 1d991f241d0..1df52492ff2 100644 --- a/addons/web_editor/static/src/js/backend/convert_inline.js +++ b/addons/web_editor/static/src/js/backend/convert_inline.js @@ -298,6 +298,7 @@ function cardToTable($editable) { for (const card of editable.querySelectorAll('.card')) { const table = _createTable(card.attributes); table.style.removeProperty('overflow'); + const cardImgTopSuperRows = []; for (const child of [...card.childNodes]) { const row = document.createElement('tr'); const col = document.createElement('td'); @@ -326,6 +327,17 @@ function cardToTable($editable) { superCol.append(subTable); superRow.append(superCol); table.append(superRow); + if (child.classList && child.classList.contains('card-img-top')) { + // Collect .card-img-top superRows to manipulate their heights. + cardImgTopSuperRows.push(superRow); + } + } + // We expect successive .card-img-top to have the same height so the + // bodies of the cards are aligned. This achieves that without flexboxes + // by forcing the height of the smallest card: + const smallestCardImgRow = Math.min(0, ...cardImgTopSuperRows.map(row => row.clientHeight)); + for (const row of cardImgTopSuperRows) { + row.style.height = smallestCardImgRow + 'px'; } card.before(table); card.remove(); @@ -824,6 +836,12 @@ function formatTables($editable) { row.style.verticalAlign = 'middle'; } else if (alignItems === 'flex-end' || alignItems === 'baseline') { row.style.verticalAlign = 'bottom'; + } else if (alignItems === 'stretch') { + const columns = [...row.children].filter(child => child.nodeName === 'TD'); + const biggestHeight = Math.max(...columns.map(column => column.clientHeight)); + for (const column of columns) { + column.style.height = biggestHeight + 'px'; + } } } // Tables don't properly inherit alignments from their ancestors in Outlook.