652775 - text in <legend> doesn't wrap

Status: VERIFIED FIXED

(Core :: Layout: Form Controls, defect, P1)

Description

[JSL]

User-Agent:       Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_7; en-US) AppleWebKit/534.16 (KHTML, like Gecko) Chrome/10.0.648.205 Safari/534.16
Build Identifier: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:2.0) Gecko/20100101 Firefox/4.0

I tested this on my Mac, OSX and Ubuntu 11-4 Laptops. In both instances, Firefox does not correctly render the page.  This is a critical bug, because I will have many remote users coming to this lesson to engage the material.  If Firefox does not render the pages appropriately, I will be forced to warn the students that they cannot complete the lesson using FF, and should instead use Chrome or Safari.

Reproducible: Always

Steps to Reproduce:
1. Go to: http://moodle.jonathan-list.com/mod/lesson/view.php?id=4&pageid=19
2. Log in as guest and load a question page (that link should take you there)
3. If it says "Start from beginning?" Say no.

Actual Results:  
The body of content related to the question is rendered in one long line.

Expected Results:  
Should be loaded within the contents of the div.

Comment 1

[Robert Longson [:longsonr]]

You have the div with the text in as a child of a legend element which is a child of a fieldset. I think you want the legend/fieldset tags only around the possible answers and not the question.

Comment 2

[JSL]

(In reply to comment #1)
> You have the div with the text in as a child of a legend element which is a
> child of a fieldset. I think you want the legend/fieldset tags only around the
> possible answers and not the question.

Yes, the problem may be with the code on the site, however since it renders fine in MSIE, Chrome and Safari, this is an issue with FF 4.  The other problem is that I'm not a Moodle Developer; I'm just a teacher in this instance.  I'm not going to hack around in the Moodle Core to fix a problem that is only showing up in FF.

Comment 3

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

So the issue is that the text that starts with "This is a little bit of a puzzle" doesn't wrap?  (I was looking at the other text, and very nearly posted a comment saying it worked fine for me.)

Comment 4

[Boris Zbarsky [:bzbarsky]]

This is more or less purposeful.  Legends are styled "white-space: nowrap" in our UA stylesheet.  Last I checked, that was for compat reasons....  If those are no longer operative, we can probably remove that.

Comment 5

[Boris Zbarsky [:bzbarsky]]

In the meantime, if you have any control at all over the CSS in question you can override the style in your stylesheet by setting:

  legend { white-space: normal }

But it sounds like you may not...

Comment 6

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

FWIW, in 3.6 the content that's in the legend in 4.0 isn't in the legend at all, so the trigger for this bug may have been the HTML5 parser.  (I wonder which way it parses in other browsers.)

That said, the source of the page is:

		<legend class="ftoggler"><div class="box contents"><div style="width: 600px;">This is a little bit of a puzzle.  Below you will find four links.  Select the answer that matches the link with the title that most accurately matches the associated URL.  Please use the skills you learn on the last page to complete this task; it will make your life much simpler.</div>

Maybe the "nowrap" that other browsers do is really something that doesn't override a width on a child of the legend... i.e., just a difference in width calculation.  (Is that *really* needed for compat?)

Comment 7

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Attachment: some examples

Comment 8

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Chromium seems to wrap both examples; haven't tried other browsers yet.

Comment 9

[JSL]

in Reply to Comment 6:

the HTML: <legend class="ftoggler"><div class="box contents"><div style="width: 600px;">This is a little bit of a puzzle.  Below you will find four links.  Select the answer that matches the link with the title that most accurately matches the associated URL.  Please use the skills you learn on the last page to complete this task; it will make your life much simpler.</div>

Shows up in Chrome, exactly like you see.  The part, "div style = "width 600px;">"  is actually added in the content; I was hoping to force FF4 into rendering the box correctly as a workaround.  

The same code is displayed in the source page for FF4.

Comment 10

[Boris Zbarsky [:bzbarsky]]

JSL, if you can add inline styles, you can just add the style from comment 5 to your <legend> to make things work for you.

David, on your testcase I see WebKit and opera wrapping both sets of text.  IE9 wraps the second, but not the first.  We could sort of get that behavior by styling |fieldset > legend > * { white-space: normal; }| in forms.css, but that would be sort of sad.... and possibly override other styles that set white-space in ua.css.  I'd rather just remove the white-space styling at all than do that....

Alternately, we could add a new value of white-space which is treated as "nowrap" but inherits as "normal"... except to text nodes or something.  It's a mess.

Comment 11

[JSL]

(In reply to comment #10)
> JSL, if you can add inline styles, you can just add the style from comment 5 to
> your <legend> to make things work for you.

I have at least 50 (but I think close to 100) pages that this affects.  While I *could* add this to each bit of text, I don't really have time to do it right now.

Comment 12

[Boris Zbarsky [:bzbarsky]]

To be clear, I'm offering you a workaround you can use for the problem in the interim, since the earliest that you will see a fix for this issue shipping is in August.  Whether you want to make use of the workaround is up to you.

Comment 13

[JSL]

(In reply to comment #12)
> To be clear, I'm offering you a workaround you can use for the problem in the
> interim, since the earliest that you will see a fix for this issue shipping is
> in August.  Whether you want to make use of the workaround is up to you.

And I appreciate it; really I do! It's the end of the semester, though, and I have tons of things that are higher priority...

And I feel happy that I found a bug to be fixed so that FF 5 will be better! :-)  I probably will do the work-around after the semester is over: I just have lit reviews, journal articles, an entire web app and 30 students worth of grading to finish! :-)

Comment 14

[Boris Zbarsky [:bzbarsky]]

Oh, I understand how the end of semester thing works.  :)

This won't be fixed in Firefox 5; that's shipping in June.  But hopefully in Firefox 6 (August).

Comment 15

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Why can't we just match WebKit and Opera, drop the 'white-space: normal', and make any other layout changes we need to match?

Comment 16

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

er, drop the white-space: nowrap.  (They're both 6 letters starting with n!)

Comment 17

[Boris Zbarsky [:bzbarsky]]

I'd be fine with just dropping the white-space style, I think.

We shouldn't need any changes other than perhaps to tests to accomodate that, I think....  we'll just have different behavior.

Comment 18

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

We should check that we pass an appropriate available width in so that the shrink-wrapping works correctly.

Comment 19

[Boris Zbarsky [:bzbarsky]]

Sure, but I'm pretty sure we do.

Are you writing the patch, or should I?

Comment 20

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Could you?

Comment 21

[Boris Zbarsky [:bzbarsky]]

Will do.

Comment 22

[Boris Zbarsky [:bzbarsky]]

Attachment: Remove the default nowrap styling on <legend>.

Comment 23

[Boris Zbarsky [:bzbarsky]]

Attachment: Remove the default nowrap styling on <legend>.

This passes try

Comment 24

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Comment on attachment 530913 [details] [diff] [review]
Remove the default nowrap styling on <legend>.

r=dbaron

Comment 25

[Boris Zbarsky [:bzbarsky]]

http://hg.mozilla.org/mozilla-central/rev/0191efa548ac

Comment 26

[Simona Badau, Desktop QA]

Mozilla/5.0 (Windows NT 5.1; rv:6.0) Gecko/20100101 Firefox/6.0

Verified issue on Windows XP, Windows 7, Mac OS X 10.6 and Ubuntu using the examples from Comment 7 (looks good).

But when I verify the issue using the STR from Comment 0, the first row <A) Learn more about Moodle> is a little out of the rectangle (especially on Ubuntu). Is that ok?

Comment 27

[Boris Zbarsky [:bzbarsky]]

That's correct for a legend, which sits with its first line centered on the top border, yes.

Comment 28

[Simona Badau, Desktop QA]

Mozilla/5.0 (Windows NT 5.1; rv:6.0) Gecko/20100101 Firefox/6.0

Based on Comment 27, setting resolution of this issue to VERIFIED FIXED.