Dropdown menu in quiz question expended to 100%

Dropdown menu in quiz question expended to 100%

by speedy jiang -
Number of replies: 11
We just realized that the dropdown menu in our quiz questions are all expended to 100% to it's container, if it's not in a table or something like that then it would expand to the full page.
It was to the longest option before, not sure what's going on.
Our LEARN was upgraded from moodle 4.0 to moodle 4.1 at the beginning of this year.

Thanks in advance.
Average of ratings: -
In reply to speedy jiang

Re: Dropdown menu in quiz question expended to 100%

by Marcus Green -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers
What is LEARN? What theme are you using, the reason I ask is that themes can affect how screen components are displayed. Are you the admin of your site?
In reply to Marcus Green

Re: Dropdown menu in quiz question expended to 100%

by speedy jiang -
Hi Marcus,

LEARN is the name for moodle in our university, sorry for the confusion.
I am not the admin to our site, I'm a manager to a course and is responsible to the quiz set up.
I believe we are using the boost union theme.

Cheers,
speedy
In reply to speedy jiang

Re: Dropdown menu in quiz question expended to 100%

by Dominique Bauer -
Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Plugin developers
Providing a screenshot and a question in XML format would help us help you out.
In reply to Dominique Bauer

Re: Dropdown menu in quiz question expended to 100%

by speedy jiang -
Thanks Dominique,

Here they are.
In reply to speedy jiang

Re: Dropdown menu in quiz question expended to 100%

by Marcus Green -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers
That looks like a theme (or at least css) issue to me.  it is something that only the admins can address. Though if they can ask here or provide you with more information (e.g. what theme is being used) it may be possible to give more hints.
In reply to Marcus Green

Re: Dropdown menu in quiz question expended to 100%

by speedy jiang -
Thanks Marcus.
I have issued a service ticket to our IT and am waiting for response.
In reply to speedy jiang

Re: Dropdown menu in quiz question expended to 100%

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

speedy,

With the vanilla Boost theme, the question displays normally, in a similar way as shown above by Visvanath.

The documentation on the Boost 'Union' theme states that the theme is configurable. Maybe your IT people have configured it that way. If you are not a site administrator, you cannot change this behavior for the entire LEARN, but you can attempt to change it for the course you are responsible for with a little CSS as follows:

.formulation .subquestion select {
    width: 150px !important;
}

Note that you need to use the 'Plain text area' editor to edit such CSS style because other editors (Atto, TinyMCE, etc.) will flush it automatically.

Alternatively, you can put the CSS in the form of a JavaScript code, so it does not get flushed by editors:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $(".formulation .subquestion select").css("width", "150px !important");
});
</script>

If they work, the above CSS or JavaScript apply to Cloze question's drop-down menus. Other occurrences of full-width menus, for example with other question types, may require a slight adjustment of the above styling.

You can put the above code, CSS or JavaScript, in different places:

  • For a single question: in the question text.
  • For a single quiz on multiple pages: in a quiz's 'Text' block. Save and configure the block. Set 'Where this block appears/ Display on page types' to 'Any quiz module page' and, in the quiz settings, set 'Appearance/ More.../ Show blocks during quiz attempts' to 'Yes'.
  • For the whole course: in a main page's 'Text' block. Save and configure the block. Set 'Where this block appears/ Display on page types' to 'Any page' and, in every quiz settings, set 'Appearance/ More.../ Show blocks during quiz attempts' to 'Yes'.

I could install the 'Boost Union' theme and give you a better and more definitive answer, but I'm a bit short on time. In the meantime, you can try the solution I'm proposing. Adjust the 150px width according to your needs. Obviously, the 'auto' width might work and the '!important' rule may not be necessary (but it doesn't hurt).

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

Re: Dropdown menu in quiz question expended to 100%

by speedy jiang -
Thanks Dominique for your detailed reply!
I'll have a go with those settings!
In reply to Dominique Bauer

Re: Dropdown menu in quiz question expended to 100%

by speedy jiang -
Thanks a lot Dominique, that works for me!