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

[MisRob]

🌱 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:

kolibri-design-system/lib/KSelect/index.vue

Lines 878 to 893 in 0cbdf57

	calculateSpaceBelow() {
	// Get the height of element
	const buttonHeight = this.$el.getBoundingClientRect().height;
	// Get the position of the element relative to the viewport
	const buttonPosition = this.$el.getBoundingClientRect().top;
	// Check if there is enough space below element
	// and update the "dropdownButtonBottom" data property accordingly
	const notEnoughSpaceBelow =
	buttonPosition > this.maxDropdownHeight &&
	this.scrollableAncestor.offsetHeight - buttonPosition <
	buttonHeight + this.maxDropdownHeight;
	this.dropdownButtonBottom = notEnoughSpaceBelow ? buttonHeight + 'px' : 'auto';
	},

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 learningequality/kolibri#12079 (not related to the refactor being tested there - the bug was present before).

[Sahil-Sinha-11]

Hey @MisRob I was planning to work on this issue , so I was trying to reproduce the 1st img coach->plan->lesson but when I signed up in Kolibri I was signed up as a learner, could you please help me here. 😓

[AllanOXDi]

Hi @Sahil-Sinha-11 this could be that you are signing in with a learner account you created instead. You need to create a admin or coach account and log in

[Sahil-Sinha-11]

Hey @AllanOXDi during creation of an account I dont see an option to make a profile as a coach, I am automatically assigned Learner.

[MisRob]

@Sahil-Sinha-11 When setting up Kolibri, you created admin account in the setup wizard I assume? Can you use the admin account to login? That should make this place accessible.

[MisRob]

@Sahil-Sinha-11 Also note there's more ways to setup Kolibri, some of them not having Coach features. I recommend you use "Group learning" -> "Full Device". More here https://kolibri.readthedocs.io/en/latest/install/initial_setup.html?highlight=setup#group-learning. Let us know if this helps. If you can't still access Coach, please post the recording or a list of steps you did.