Hello,
The problem illustrated in your screenshot sounds like a consequence of the improved question bank filtering in Moodle 4.3 (MDL-72321).
I'm going to move your post to the Quiz forum where hopefully a question bank expert can advise if the problem has already been reported, or if you need to create an issue for it. (I did a quick search but couldn't find anything.)
You are right, I responded too quickly. Indeed, with version 4.3, the drop-down menu is hidden in its window, which is quite inconvenient.
They superimposed a new <ul> tag on the exiting <select> tag that they hid. If you reverse the display of these tags, i.e. hide the <ul> tag and show the <select> tag, you will get pretty much what you had in version 4.2.
Note that this is a workaround until a permanent solution is made. You can put the script in "Site administration/Appearance/Additional HTML" if you have access to it or otherwise in a "Text" block.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> <script> $(document).ready(function() { $("a[data-action=questionbank]").click(function() { const dcinterval = setInterval(function () { if ( $("div.questionbankwindow .form-autocomplete-input").hasClass("dcstop") ) { $("div.questionbankwindow .form-autocomplete-input").removeClass("dcstop"); clearInterval(dcinterval); } $("select#filter-value-category").css({ "visibility": "visible", "display": "initial", "height": "36px", "width": "auto", "color": "#1D2125", "border": "thin solid #3c524c", "border-radius": "8px", "position": "relative", "display": "inline-block" }); $("div.questionbankwindow div[role=listbox]").css({ "position": "absolute", "left": "400px" }); $("div.questionbankwindow .form-autocomplete-selection") .css({ "display": "none", "visibility": "hidden" }); $("div.questionbankwindow .form-autocomplete-input").css({ "display": "none", "visibility": "hidden" }); $("div.questionbankwindow .form-autocomplete-input").addClass("dcstop"); }, 500); }); }); </script>
I revisited the question because MDL-70180 is still open after 3 years and because it seemed to me that a simple solution should be possible. In fact, it's just formatting the <ul> element like this:
<style>
ul.form-autocomplete-suggestions {
overflow-y: auto;
fixed station ;
min-height: 500px;
max-height: 500px;
}
</style>
where you can adjust the 500px dropdown menu height to suit your screen. It's possible to adjust this height depending on that of the drop-down list, but since I've already spent 3 hours on this issue, I'd rather leave that to others.
Here's a JavaScript version where only the format of the "form-autocomplete-suggestions" <ul> element is modified as in the CSS code above, and the height of the dropdown menu is adjusted to its content without, however, exceeding the available height of the window:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("a[data-action=questionbank]").click(function() {
const dcinterval = setInterval(function () {
if ( $("div.questionbankwindow .form-autocomplete-input").hasClass("dcstop") ) {
$("div.questionbankwindow .form-autocomplete-input").removeClass("dcstop");
clearInterval(dcinterval);
}
$(".form-autocomplete-downarrow.position-absolute").click(function() {
setTimeout(function (){
var $dcheight= 0;
$("ul.form-autocomplete-suggestions > li").each(function(){
$dcheight += $(this).outerHeight();
});
$dcheightmin = $dcheight + 30 + "px";
var $dcheightmax = $(window).innerHeight() - 200 + "px";
$("ul.form-autocomplete-suggestions").css({"overflow-y":"auto", "position":"fixed", "height":$dcheightmin, "max-height":$dcheightmax});
}, 100);
});
$("div.questionbankwindow .form-autocomplete-input").addClass("dcstop");
}, 500);
});
});
</script>
This code was written by me, who is just a simple user, and therefore it could undoubtedly be improved by a professional programmer.
Nevertheless, despite potential improvements, it currently works well, as a temporary workaround, at least within a specific scenario of the question bank.