Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
1 of 17 tasks
stigmollerhansen opened this issue Sep 20, 2021 · 5 comments · May be fixed by #7164
Open
1 of 17 tasks

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

stigmollerhansen opened this issue Sep 20, 2021 · 5 comments · May be fixed by #7164

Comments

@stigmollerhansen
Copy link

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)

@welcome
Copy link

welcome bot commented 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.

@stigmollerhansen stigmollerhansen changed the title createCheckbox() inserts <div> createCheckbox() without label inserts unnecessary <div> Sep 20, 2021
@samdelong
Copy link
Contributor

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

@awelles
Copy link
Contributor

awelles commented Dec 7, 2021

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
Copy link
Author

Exactly what I meant, @awelles!

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

@reejuBhattacharya
Copy link
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!

@Forchapeatl Forchapeatl linked a pull request Aug 8, 2024 that will close this issue
3 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants