Closed Bug 1425646 Opened 6 years ago Closed 5 years ago

Lacking width attribute in <textarea> element in Active learning examples at CodePen and JSFiddle

Categories

(Developer Documentation Graveyard :: Learning Area, defect, P1)

defect

Tracking

(Not tracked)

RESOLVED INCOMPLETE

People

(Reporter: yk3b.bw.ggxwkimobz, Assigned: cmills)

Details

User Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:57.0) Gecko/20100101 Firefox/57.0
Build ID: 20171206182557

Steps to reproduce:

1. Open a JavaScript learning page e.g.: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Arrays
2. Find first <textarea> box; a text box with "Reset" and "Show solution" buttons under it.
3. Click on either "Open in CodePen" or "Open in JSFiddle" button under the text box.


Actual results:

<textarea> element is lacking width attribute; <textarea>'s box is very narrow in the result field; unsuitable for editing code inside it.


Expected results:

<textarea>'s width to be suitable for editing the code inside it.
In examples like this it would be better to hide the "Open in CodePen" or "Open in JSFiddle" buttons, because the "example" includes the editor harness as well as the actual example code.

You can do that by passing the "class" parameter to EmbedLiveSample[1], and giving it a value other than "sample-code-frame". For example, the flex example[2] does this using a call like:

{{EmbedLiveSample("flex", 1200, 370, "", "", "example-outcome-frame")}}


[1] https://github.com/mdn/kumascript/blob/master/macros/EmbedLiveSample.ejs
[2] https://developer.mozilla.org/en-US/docs/Web/CSS/flex
P1 per DocTracker spreadsheet
Assignee: nobody → cmills
Component: General → Learning Area
Priority: -- → P1

I'm closing this, as we arfe now tracking this issue in https://github.com/mdn/sprints/issues/972

Status: UNCONFIRMED → RESOLVED
Closed: 5 years ago
Resolution: --- → INCOMPLETE
You need to log in before you can comment on or make changes to this bug.