4.3 drop-down list inside popup window issue

4.3 drop-down list inside popup window issue

by Mosaab Alsiddig -
Number of replies: 13
In previous versions of Moodle, when adding quiz questions from question bank, the category drop-down list appears infront of the popup window like this


But in Moodle 4.3 this drop-down list content disappear inside the opoup container, like this


I want the previous behaviuor of 4.2 drop-down list, what property should I change?
Average of ratings: -
In reply to Mosaab Alsiddig

Re: 4.3 drop-down list inside popup window issue

by Helen Foster -
Picture of Core developers Picture of Documentation writers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers Picture of Translators

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.)

In reply to Helen Foster

Re: 4.3 drop-down list inside popup window issue

by Mosaab Alsiddig -
Thanks Helen
I hope if there is a way to see all categories like previous versions
In reply to Mosaab Alsiddig

Re: 4.3 drop-down list inside popup window issue

by Dominique Bauer -
Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Plugin developers

MoodleForum_20231113_0838.png

Use the scroll bar to view all items in the drop-down list.

In reply to Dominique Bauer

Re: 4.3 drop-down list inside popup window issue

by Mosaab Alsiddig -
Hi Dominque,

Thank you for your response.

Regrettably, utilizing the scroll feature becomes quite inconvenient when dealing with an extensive list of categories. Despite my attempts to manipulate the CSS, I have been unable to identify the property that would address this issue.

I'm hopeful that someone might be able to provide assistance.
In reply to Mosaab Alsiddig

Re: 4.3 drop-down list inside popup window issue

by Tim Hunt -
Picture of Core developers Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers
I agree that this is incovenient, and it would be better if this could be fixed.

However, this feature is implemeted using standard Moodle form widgets in a standard Moodle pop-up. So, this is not really a quiz-specific problem, but a problem with the underlying techologies.

Still worth fixing, but I am not sure how to go about it.
In reply to Tim Hunt

Re: 4.3 drop-down list inside popup window issue

by Mosaab Alsiddig -
Thanks Tim
I hope if someone can move the post to User experience (UX) forum
In reply to Mosaab Alsiddig

Re: 4.3 drop-down list inside popup window issue

by Tim Hunt -
Picture of Core developers Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers
Acutally, this issue has alread been reported in the tracker, and is being looked at: MDL-70180.
Average of ratings: Useful (1)
In reply to Mosaab Alsiddig

Re: 4.3 drop-down list inside popup window issue

by Dominique Bauer -
Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Plugin developers

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>

MoodleForum_20231114_2148.png

Average of ratings: Useful (1)
In reply to Dominique Bauer

Re: 4.3 drop-down list inside popup window issue

by Mosaab Alsiddig -
It works Dominique 😀
Thank you very much

I hope they revert it in the next release
In reply to Dominique Bauer

Re: 4.3 drop-down list inside popup window issue

by Dominique Bauer -
Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Plugin developers

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. हसणे

In reply to Dominique Bauer

Re: 4.3 drop-down list inside popup window issue

by Mosaab Alsiddig -
Thanks for the simple code
Actually it is not waste of time 🙂
While the second solution is simple and worked for one site, It failed in the other site, may be because it conflicts with some other custom code
So I still use and appreciate your first javascript solution 🙂
Average of ratings: Useful (1)
In reply to Mosaab Alsiddig

Re: 4.3 drop-down list inside popup window issue

by Dominique Bauer -
Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Plugin developers

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.

Average of ratings: Useful (1)
In reply to Mosaab Alsiddig

Re: 4.3 drop-down list inside popup window issue

by Dominique Bauer -
Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Plugin developers

Note that the above script actually only modifies the "overflow-y", "position", "height" and "max-height" properties of the "ul.form-autocomplete-suggestions" element. sourire

Average of ratings: Useful (1)