diff --git a/src/components/LinkItems/Collapsable.vue b/src/components/LinkItems/Collapsable.vue index 76732f03..132f24c0 100644 --- a/src/components/LinkItems/Collapsable.vue +++ b/src/components/LinkItems/Collapsable.vue @@ -1,6 +1,6 @@ <template> <div - :class="`collapsable ${rowColSpanClass} ${collapseClass}`" + :class="`collapsable ${rowColSpanClass} ${collapseClass} ${!cutToHeight ? 'full-height' : ''}`" :style="`${color ? 'background: '+color : ''}; ${sanitizeCustomStyles(customStyles)};`" > <input @@ -43,6 +43,7 @@ export default { rows: Number, // Set section vertical row span / height color: String, // Optional color override customStyles: String, // Optional custom stylings + cutToHeight: Boolean, // To set section height with content height }, components: { Icon, @@ -252,5 +253,16 @@ export default { right: 0.5rem; top: 0.5rem; } + // Makes sections fill available space + &.is-open.full-height { + height: -webkit-fill-available; + display: flex; + flex-direction: column; + align-items: normal; + .collapsible-content { + height: -webkit-fill-available; + width: 100%; + } + } } </style> diff --git a/src/components/LinkItems/Section.vue b/src/components/LinkItems/Section.vue index db3d73ee..cdb8bf21 100644 --- a/src/components/LinkItems/Section.vue +++ b/src/components/LinkItems/Section.vue @@ -8,6 +8,7 @@ :rows="displayData.rows" :color="displayData.color" :customStyles="displayData.customStyles" + :cutToHeight="displayData.cutToHeight" @openEditSection="openEditSection" @openContextMenu="openContextMenu" >