Skip to content

createCheckbox() without label inserts unnecessary <div> #5422

@stigmollerhansen

Description

@stigmollerhansen

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 processes
    Color
    Core/Environment/Rendering
    Data
    DOM
    Events
    Friendly error system
    Image
    IO (Input/Output)
    Localization
    Math
    Unit Testing
    Typography
    Utilities
    WebGL
    Other (specify if possible)

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)

Activity

welcome

welcome commented on Sep 20, 2021

@welcome

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.

changed the title [-]createCheckbox() inserts <div>[/-] [+]createCheckbox() without label inserts unnecessary <div>[/+] on Sep 20, 2021
samdelong

samdelong commented on Sep 23, 2021

@samdelong
Contributor

Please provide some screenshots or code snippets of the generated HTML!

awelles

awelles commented on Dec 7, 2021

@awelles
Contributor

Here's code + output showing what I think @stigmollerhansen is describing.

This:

function setup() {
  createCanvas( 400, 400 ); 
  let s = createCheckbox( 'label', false );
  let f = createInput();
}

function draw() {
}

produces this, grouping the checkbox and label in a div:

<div>
  <input type="checkbox" id="3anqiyphfc8">
  <label for="3anqiyphfc8">label</label>
</div>
<input value="" type="text">

This, with no label given to createCheckbox:

function setup() {
  createCanvas( 400, 400 );
  let s = createCheckbox();
  let f = createInput();
}

function draw() {
}

produces this:

<div>
  <input type="checkbox">
</div>
<input value="" type="text">

I believe @stigmollerhansen is suggesting that if not given a label createCheckbox should produce this instead:

<input type="checkbox">
<input value="" type="text">
stigmollerhansen

stigmollerhansen commented on Dec 8, 2021

@stigmollerhansen
Author

Exactly what I meant, @awelles!

Thank you for your follow-up code example and for bringing this issue to my attention again.

reejuBhattacharya

reejuBhattacharya commented on Jan 15, 2022

@reejuBhattacharya
Contributor

@limzykenneth @outofambit
I attempted to solve this issue and noticed that, in the createCheckbox function, we create the surrounding<div> and append the checkbox to it before validating whether argument[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 the if statement which validates whether 'label' is null or not. This else block would simply return a checkbox using addElement 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> and addElement 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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      Participants

      @awelles@stigmollerhansen@Qianqianye@samdelong@reejuBhattacharya

      Issue actions

        createCheckbox() without label inserts unnecessary <div> · Issue #5422 · processing/p5.js