jmatch formatting

jmatch formatting

by Claude Eilers -
Number of replies: 5

Hi Gordon et al.,

The formatting for my Jmatches are being misapplied a little in moodle 2.8.  (See attached images, one with the hotpot-html in moodle and one as I was hoping to see it.) 

(The file is html that I've added added a minimum height to so that the matched items are the same on both left and right. Note also the floating little box at the top, to which is pointing one of the arrows.)

Attachment jmatchformatting-2.png
Attachment jmatchformatting-2b.png
Average of ratings: -
In reply to Claude Eilers

Re: jmatch formatting

by Gordon Bateson -
Picture of Core developers Picture of Peer reviewers Picture of Plugin developers
Hello Claude,

please could you attach the jmt file to your next post to this forum, so that I can investigate. Also, please could you tell me what Moodle theme you are using.

thanks
Gordon

In reply to Gordon Bateson

Re: jmatch formatting

by Claude Eilers -

It seems to be a template problem, i guess.   It looks fine in 'Clean', 'Essential', and 'More', but is wonky in Bootstrap 3, Shoehorn, and Shoelace.  I've attached the html file, in case you're interested in looking.

In reply to Claude Eilers

Re: jmatch formatting

by Gordon Bateson -
Picture of Core developers Picture of Peer reviewers Picture of Plugin developers

I would say it seems to be a CSS problem.

The CSS from certain themes interferes with the CSS that you are using in your html file. The solution is probably to make your CSS selectors more specific, or add new CSS selectors, so that they only affect the particular elements they are intended for.

I find the Google Chrome's "Inspect this element" functionality very useful for investigating what CSS is affecting a particular element. In your case, I suggest you right click on the orhpaned white box, select "Inspect this element" and start you investigation there.

I may have time to look at this, but in the meantime I encourage you to try yourself.

best regards
Gordon

In reply to Gordon Bateson

Re: jmatch formatting

by Claude Eilers -

Thanks, Gordon.  I'll do that. (But given that it's easy to fix by using a different template, I might just stick with that.)

In reply to Claude Eilers

Re: jmatch formatting

by Gordon Bateson -
Picture of Core developers Picture of Peer reviewers Picture of Plugin developers

Claude,

you have set the "min-height" to "2em", but this leaves you at the mercy of the Moodle theme to decide how high a single "em" unit is. Obviously for the the themes based on Bootstrap3, the "em" unit is too small for your purposes.

If you wish to stick with the themes based on Bootstrap 3, I suggest you set the "min-height" on this JMatch exercise to "48px". It will then display as in the attached screenshot, which is using the Bootstrap 3 theme on Moodle 2.8.

I could not reproduce the orphaned white box that appears in your initial screenshot. I guess this comes from html that you have inserted in the top of the document using the settings for the theme.

regards
Gordon

Attachment moodle.28.hotpot.shoehorn.48px.png