Page MenuHomePhabricator

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

Assigned To
Authored By
Mvolz
Jul 9 2017, 3:35 PM
Referenced Files
F9024171: infes_4.png
Aug 10 2017, 7:39 PM
F9024167: infes_3.png
Aug 10 2017, 7:39 PM
F9024164: infes_2.png
Aug 10 2017, 7:39 PM
F9023063: infe.png
Aug 10 2017, 5:48 PM
F8984136: test_image.png
Aug 8 2017, 10:06 AM
F8977080: Image_numbering.png
Aug 7 2017, 9:42 AM

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.

Event Timeline

Mvolz triaged this task as Medium priority.Jul 9 2017, 3:50 PM
Mvolz updated the task description. (Show Details)
Mvolz added a subscriber: Harjotsingh.

I'm able to see the numbering currently.

Screenshot -

Image_numbering.png (768×1 px, 178 KB)

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'm able to see the numbering currently.

Screenshot -

Image_numbering.png (768×1 px, 178 KB)

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.

test_image.png (1×1 px, 140 KB)

Any ideas ?

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.

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-

infe.png (357×1 px, 26 KB)

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.

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-

infe.png (357×1 px, 26 KB)

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 .

infes_2.png (349×730 px, 54 KB)

  1. infes_3.png (315×505 px, 44 KB)
  1. infes_4.png (338×576 px, 45 KB)

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

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