Firefox issue with overflow

[Syxton]

Using Firefox v119.0

We are seeing the following in Firefox using Moodle 4.2.3 and the latest dd-match.

We have worked around it with the following css added to our Boost theme Raw initial SCSS:

@supports (-moz-appearance:none) {
.ddmatch li.dragdrop-choice, .ddmatch .dragdrop-question p {
overflow: auto !important;
}
}

---

As a complete side note
we also like to use the following css to make answers fit as tightly as possible if you are interested.

.ddmatch li.draghome.unplaced, .ddmatch li.draghome.beingdragged {
display: inline-block;
width: auto !important;
vertical-align: top;
}

[abonaccorso]

We could reproduce this on Moodle 4.3.x. A fix would be very appreciated. In the mean time as a workaround we recommend our users to use qtype_ddimageortext and qtype_ddwtos depending on their scenarios.

[moumitahalder]

@abonaccorso, please make sure you are using the latest version of the plugin i.e. 2.5.2
Because this is getting displayed like - https://snipboard.io/Fetwr2.jpg

Can you please check and let us know.

[abonaccorso]

Dear @moumitahalder, yes we are using 2.5.2 (Build: 2023101300) on Moodle 4.3.8. I enclosed a detailled description written by one of our lecturers.

I discovered a behavior of the 'drag and drop matching' question that, I believe, is a bit below optimal. Somehow the CSS 'overflow' properties are set to "scroll" for all options, i.e. both sides of the 'assignment'. I find this quite suboptimal because this adds scrollbars all over, even to fields where the content fits. Now all the texts in such questions are typically rather short, so these scrollbars are quite detrimental to the order of the question.

Attached are some figures that illustrate the problem. By default, the properties are set to "scroll" and if this is manually deactivated (using the page inspector) the page looks fine.

Is there a way to set this property back to "visible" somehow? For the 'questions', i.e. those shown at the left, I managed to get the desired behavior by packing them in a

, which kinda overrode the CSS, but I guess that's not an elegant solution. For the options, i.e. those on the right, I didn't manage to find a solution at all.
I guess an OK solution would be to override these settings somehow in a script, but I'm not an HTML/CSS expert and don't know how exactly to write such a script and where precisely to add it to the question.

Can you please have a look at it?

Best regards,
Antonia

[moumitahalder]

Hello Antonia, we have tried to re recrate the same, however still not able to find the issue.
To check the same, please log into this site - https://demo.dualcube.com/moodledemo/login/index.php

After that, visit this page

Kindly keep us posted.

[abonaccorso]

Hi @moumitahalder,

I had a look at the Moodlesite you indicated (demo.dualcube.com). The issue looks better, but not as indicated in your screenshot. For me it looks like this

Note that the text is cut in the last box on the left hand side and the first box on the right hand side. If I hover over those boxes with my mouse, I can see the scroll bar (in the top right box in the screen shot)

So this behaviour is much better as the horizontal scroll bar is no longer present and the vertical scroll bar is visible only when needed. Given that I would have the space on my screen to see the whole text in the box, I would prefer to see the whole text without need for scrolling.

Please also note: I reported the error on Moodle 4.3.9, your testsite is running 4.4.3 instead. This might also be a reason why you are not able to replicate the bug as I reported it.

To further specify my scenario: I am testing on Firefox. Maybe you use another browser?