learningequality
Kmodal should be able to show dropdowns select without making scrollbars appear
Product
KDP, but applicable to Kolibri as well
Expected behavior
When a dropdown is clicked in a modal window, the option items should open over the modal window, covering the actions div. That's what vuetify does by default: https://codesandbox.io/s/serverless-meadow-8z3qu?file=/src/components/Playground.vue
Actual behavior
It seems this code is recalculating the size of the modal on the fly, making the scrollbars appear causing an ugly effect:
Steps to reproduce the issue
Insert a KSelect in a KModal with a few items, and click on it
related: https://github.com/learningequality/kolibri-design-system/issues/356
The difference between Vuetify VSelect behaviour and the KSelect behaviour seems to be that VSelect attaches the menu to the DOM outside of the modal, and then positions it to be in the correct place visually.
This doesn't seem to do anything bad for keyboard navigation, but we might need to take a look at the vuetify source to get a robust solution for this if we wanted to emulate it.
May be related https://github.com/learningequality/kolibri-design-system/issues/210
Reopening this issue after experiencing a similar issue while working with KSelects in Modals in Studio.
Some of the work introduced to KDS in https://github.com/learningequality/kolibri-design-system/pull/722 may help to resolve this
hey @jredrejo i would like to try solving this bug? i saw no 'help wanted' tag can i still work on this?
Hey @lokesh-sagi125! Right now you have other 2 issues assigned, lest solve them before assigning you another issue! :) Thanks for your willingness to contribute to Kolibri 💓
yes @AlexVelezLl ill make sure to solve them before getting assigned here, thanks:)