-
-
Notifications
You must be signed in to change notification settings - Fork 3.6k
Open
Description
Using createCheckbox() without specifying a label creates an element wrapped in a
. By comparison, createInput() simply inserts an element. For consistency and ease of having to style checkboxes with CSS it would be desireable if createCheckbox() with no label specified behaved like createInput().
Most appropriate sub-area of p5.js?
- Accessibility (Web Accessibility)Build tools and processesColorCore/Environment/RenderingDataDOMEventsFriendly error systemImageIO (Input/Output)LocalizationMathUnit TestingTypographyUtilitiesWebGLOther (specify if possible)To pick up a draggable item, press the space bar. While dragging, use the arrow keys to move the item. Press space again to drop the item in its new position, or press escape to cancel.
Details about the bug:
- p5.js version: 1.4.0
- Web browser and version: Google Chrome 93.0.4577.82 (Official version) (x86_64)
- Operating System: MacOSX 10.14.6
- Steps to reproduce this:
function setup() {
createCanvas(400, 400);
let s = createCheckbox();
let f = createInput();
}
function draw() {
}
(examine created elements and their associated HTML code with the browser's developer inspector)
Metadata
Metadata
Assignees
Type
Projects
Milestone
Relationships
Development
Select code repository
Activity
welcome commentedon Sep 20, 2021
Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.
[-]createCheckbox() inserts <div>[/-][+]createCheckbox() without label inserts unnecessary <div>[/+]samdelong commentedon Sep 23, 2021
Please provide some screenshots or code snippets of the generated HTML!
awelles commentedon Dec 7, 2021
Here's code + output showing what I think @stigmollerhansen is describing.
This:
produces this, grouping the checkbox and label in a div:
This, with no label given to
createCheckbox
:produces this:
I believe @stigmollerhansen is suggesting that if not given a label
createCheckbox
should produce this instead:stigmollerhansen commentedon Dec 8, 2021
Exactly what I meant, @awelles!
Thank you for your follow-up code example and for bringing this issue to my attention again.
reejuBhattacharya commentedon Jan 15, 2022
@limzykenneth @outofambit
I attempted to solve this issue and noticed that, in the
createCheckbox
function, we create the surrounding<div>
and append thecheckbox
to it before validating whetherargument[0]
, i.e, 'label' is null or not. This creates the unnecessary<div>
in question.A simple workaround would be to add an
else
block after theif
statement which validates whether 'label' is null or not. This else block would simply return a checkbox usingaddElement
without any surrounding<div>
, as there is no label element.However, this approach does not seem sufficiently robust nor elegant. Another approach would be to create the surrounding
<div>
andaddElement
after validating the 'arguments', but that would shuffle around the code quite a bit.I would greatly appreciate your thoughts on this matter, and I would proceed accordingly. Cheers!