diff --git a/CHANGELOG.md b/CHANGELOG.md index 58570328..f9af4996 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,8 @@ # Changelog +## 32.0.1 +Changed +- `GeoDropdown`: Fix extending the screen and scroll issues when dropdown is at the end of the screen. ## 32.0.0 New: - `GeoTree`: Add new prop `collapsedIcon` to use custom collapsed icon diff --git a/package.json b/package.json index cf7839bb..6ddcb58e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@geoblink/design-system", - "version": "32.0.0", + "version": "32.0.1-beta.0", "description": "Geoblink Design System for Vue.js", "author": "Geoblink ", "main": "dist/system.js", diff --git a/src/elements/GeoDropdown/GeoDropdown.vue b/src/elements/GeoDropdown/GeoDropdown.vue index 87eb5546..b455584f 100644 --- a/src/elements/GeoDropdown/GeoDropdown.vue +++ b/src/elements/GeoDropdown/GeoDropdown.vue @@ -335,6 +335,10 @@ export default { const fitsBelow = popupRect.height < availableHeightBelow const fitsAbove = popupRect.height < availableHeightAbove + if (fitsAbove && (containerRect.top + availableHeightAbove > viewport.height)) { + this.verticalAxisConfig.top.translation = this.verticalAxisConfig.top.translation - (containerRect.bottom - viewport.height) + this.verticalAxisConfig.top.availableHeight = this.verticalAxisConfig.top.availableHeight - this.verticalAxisConfig.top.translation + } // We set the config for each possible position, if fits, preferred position // and fallback position const configTowardsLeft = {