kolibri-design-system icon indicating copy to clipboard operation
kolibri-design-system copied to clipboard

Investigate KSelect’s dropdown being displayed above the input in some cases even when there is enough space below

Open MisRob opened this issue 1 year ago • 0 comments

🌱 Are you new to the codebase? Welcome! Please see the contributing guidelines.

Summary

When there is enough space, KSelect's dropdown should be displayed below the input. However, there are several places in Kolibri where the dropdown is displayed above the input, even though there's enough space below. One example from Kolibri 0.17.0a0.dev0+git.123.g5cd1f6aa:

Coach → Plan → Lessons

This issue is present in other selects in Plan and Reports.

Interestingly, in a very similar place in Facility → Users, it works as expected:

The main culprit seems to be the bottom positioning set to 62px on .ui-select-dropdown. After commenting it out, the dropdown shows correctly in the Coach:

The bottom value is calculated in the calculateSpaceBelow method:

https://github.com/learningequality/kolibri-design-system/blob/0cbdf57d24690cb6c23618ba700118a831cd9ffc/lib/KSelect/index.vue#L878-L893

The goal of this issue is to find out why exactly the calculation doesn't work well for places in the Coach (or check whether it’s overwritten from somewhere else, even though that’s rather unlikely). After we know more, we can determine the next steps and see if the calculation can be optimized.

References

Originally reported in https://github.com/learningequality/kolibri/pull/12079 (not related to the refactor being tested there - the bug was present before).

MisRob avatar Jul 26 '24 17:07 MisRob