JS example editor output doesn't wrap, makes the whole iframe scroll

[wbamberg]

This came up in mdn/interactive-examples#1377.

If the output of the example is too long to fit the editor's div#console element, then the entire editor iframe gets a scrollbar.

Perhaps a simple fix would just be to change this: https://github.com/mdn/bob/blob/master/editor/css/editable-js.css#L27 to:

    white-space: pre-wrap;

?

[caugner]

@wbamberg I looked at the issue you're referencing, but it doesn't mention any URL where the problem appears.

Would you have an example page where this occurs, by any chance?

[wbamberg]

The problem is mentioned at mdn/interactive-examples#1377 (review) as an issue for the example added in that PR, but we fixed it in content in that case, so it doesn't appear there.

The original problem was visible any time the console output overflowed the console.

It seems like we still have a version of it. Try https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/repeat - we get 2 horizontal scrollbars, one for the entire editor and one for the console.

We should have 0 horizontal scrollbars, and the console should wrap the output (just like the console in the browser devtools).

[caugner]

To remove the horizontal scrollbar, we can indeed change white-space: pre to white-space: pre-wrap here:

bob/editor/css/editable-js-and-wat.css

Lines 24 to 27 in 04c181a

	.output code {
	width: 100%;
	height: 100px;
	white-space: pre;

(And probably also here:)

bob/editor/css/tabbed-editor.css

Lines 115 to 119 in 28c31ec

	.console code {
	display: block;
	width: 100%;
	height: 100px;
	white-space: pre;

To remove the vertical scrollbar in this specific example, we could reduce it to 13 repetitions.

Before

After

[wbamberg]

To remove the vertical scrollbar in this specific example, we could reduce it to 13 repetitions.

Ouch, I hadn't seen that vertical scrollbar. But I don't think this is a content problem or should be fixed in content. If the content overflows a particular pane, it's fine for that pane to have a scrollbar, but the editor as a whole should never have scrollbars.

(I mean, there should be a kind of UI fiction that the editor is not in an iframe, but is part of the page.)

But actually, isn't the vertical scrollbar appearing because of the horizontal scrollbar? (because the h. scrollbar adds height, overflowing the iframe)? So if we fix the first, the second is fixed for us?

[caugner]

(I mean, there should be a kind of UI fiction that the editor is not in an iframe, but is part of the page.)

@wbamberg I missed this last year, but FWIW the editor will most likely always be in an iframe for security reasons, to limit what scripts inside the editors have access to.

[wbamberg]

I understand that - that's why I said fiction.

There was an effort to un-iframify them a few years back, but it never went anywhere.