Question numbers are not showing up when being wrapped around an image
Closed, ResolvedPublic

Description

Example: https://en.wikiversity.org/w/index.php?title=Infectious_Disease_Epidemiology&oldid=1703691

The first two numbers (1, 2) are not displayed, but 3 & 4 are, and if you put some returns in so they aren't wrapping, they show up.

Turning off Javascript fixes the problem. So I think it's the JS module acting up.

Mvolz created this task.Jul 9 2017, 3:35 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJul 9 2017, 3:35 PM
Mvolz triaged this task as Normal priority.Jul 9 2017, 3:50 PM
Mvolz updated the task description. (Show Details)
Mvolz added a subscriber: Harjotsingh.
Mvolz moved this task from Backlog to Bugs on the MediaWiki-extensions-Quiz board.Aug 6 2017, 4:34 PM

I'm able to see the numbering currently.

Screenshot -

Maybe refactoring the code automatically solved the problem.

Mvolz added a comment.Aug 7 2017, 8:06 PM

I'm still seeing the problem in production in Chrome. Your screen is smaller so you wouldn't be able to see the wrap in that screenshot anyway.

I'm able to see the numbering currently.

Screenshot -

Maybe refactoring the code automatically solved the problem.

I'm still seeing the problem in production in Chrome. Your screen is smaller so you wouldn't be able to see the wrap in that screenshot anyway.

I did try it on higher resolution.

Any ideas ?

Mvolz added a comment.Aug 8 2017, 10:29 AM

You have to try higher, it's still not wrapping. Or just create a test page
that has less text.

Yes I can see that I can't see the numbering when it is wrapped around the image.

A single margin-left can be used but only for big screens.

Is usage of @media screen inside extensions CSS fine ?

Apparently this isn't a Quiz extension thing, but how the images behave in mediawiki.

More info about breaking text flow due to images.

I've made edit on Wikiversity about the same.

Mvolz added a comment.Aug 10 2017, 3:53 PM

I don't see how that link is relevant? It's not that the text flow is broken. It's that the numbers are completely gone.

Turning off javascript in my browser fixes the problem. So it must have something to do with the JS.

Apparently this isn't a Quiz extension thing, but how the images behave in mediawiki.

More info about breaking text flow due to images.

I've made edit on Wikiversity about the same.

Disabling Javascript does show the numbers but not the way they should be.It results in Question statement on the next line.

The question number and question statement should be on the same line no matter the resolution
Screenshot-

The question numbers disappear when the header Quiz wraps around the image, this has been given as a example in the above provided link.

On occasion it is desirable to stop text (or other inline non-floating images) from flowing around a floating image. Depending on the web browser's screen resolution and such, text flow on the right side of an image may cause a section header (for instance, == My Header ==) to appear to the right of the image, instead of below it, as a user may expect.

In our case the header Quiz wraps around the left floating image.In smaller resolution like my screen the text is below the image but in larger resolution the text wraps.We can achieve consistent behaviour by using clear all.

I did the edit on wikiversity, It look similar to the way on my screen.

Mvolz added a comment.Aug 10 2017, 6:36 PM

Disabling Javascript does show the numbers but not the way they should be.It results in Question statement on the next line.

The question number and question statement should be on the same line no matter the resolution
Screenshot-

The question numbers disappear when the header Quiz wraps around the image, this has been given as a example in the above provided link.

On occasion it is desirable to stop text (or other inline non-floating images) from flowing around a floating image. Depending on the web browser's screen resolution and such, text flow on the right side of an image may cause a section header (for instance, == My Header ==) to appear to the right of the image, instead of below it, as a user may expect.

In our case the header Quiz wraps around the left floating image.In smaller resolution like my screen the text is below the image but in larger resolution the text wraps.We can achieve consistent behaviour by using clear all.

I did the edit on wikiversity, It look similar to the way on my screen.

I get that clear all is a workaround, but it doesn't fix this bug. This shouldn't be the normal behaviour of quiz. We should fix the html in the backend so this does not occur (whilst still allowing for Quizzes to wrap around the image.)

Change 371122 had a related patch set uploaded (by Harjotsingh; owner: Harjotsingh):
[mediawiki/extensions/Quiz@master] Add relative postion abilty to quiz form

https://gerrit.wikimedia.org/r/371122

I get your point now.

We can definitely change the CSS and HTML but it will affect in every resolution.
Using position:relative in quiz form gives the solution that you're suggesting without having any repercussions.
I've made the patch for the same.

But having quiz below the text for this particular page is better IMHO :) as it leads to different displays in different resolutions and is inconsistent.
As you can see in screenshot 1 the questions 1 to 3 are on the right but question 4 is below.
Similarly in screenshot 2 the quiz heading is on the right but the questions are below and in screenshot 3 the entire quiz is below.

Screenshots -

1 .

Change 371122 merged by jenkins-bot:
[mediawiki/extensions/Quiz@master] Add relative postion abilty to quiz form

https://gerrit.wikimedia.org/r/371122

Mvolz closed this task as Resolved.Aug 14 2017, 11:59 AM