createColorPicker example creates it OUSIDE the canvas

[wagedu]

On https://p5js.org/reference/p5/createColorPicker/ the canvas is created with size 100x100 but then the colorPicker is positioned at 0,100. So it's outside the visible region and unusable
My guess is, any other examples that use elements outside 100,100 may have the same issue

Hope it helps :)

[143divya]

Can you please assign me this issue?

[Qianqianye]

Thanks @wagedu for raising this issue and @143divya for your interest in working on this.
Before assigning contributor, I'd like to get insights from reference technical writer @nickmcintyre. Any suggestions on the solution?

[davepagurek]

For some additional context, code embeds currently pick their size by looking at the createCanvas call in the sketch, if it exists. A possible approach could be to add a way to flag reference examples as having a different size (although this would be a more involved change, as we have to propagate this flag from the doc comments in p5.js through to this repo).

Another option could be to try to place content on top of the canvas in reference sketches. I suspect there are probably a few examples that would need updating too, if we do this.

[nickmcintyre]

Oh interesting, good catch @wagedu!

It's helpful to demonstrate placing p5.Elements outside of the canvas. I added the CSS declaration height: 100% to the <iframe> and its parent <div>, and that seemed to do the trick. Both were 100px, presumably from checking createCanvas().

@davepagurek what do you think about making something like this work vertically, at least for references?

[davepagurek]

Reopening this because https://p5js.org/reference/p5/createColorPicker/ has this problem again, although some other examples (e.g. saveStl) are still working