C in properties view of a node?

Developing Nodes
1

Is there something I am doing wrong when using checkboxes in properties view of a node?
image
When I check or uncheck the box, I get this rectangle artifact? Below is the HTML fragment for the check box...

        <div class="form-row">
                <label for="node-input-delay"><i class="fa fa-check"></i> Delay (ms)</label>
                <input type="checkbox" id="node-input-delay" />
        </div>

Because it is enclose in a form row, it results right?

2

Have you checked devtools to see what is driving that?

Also, you might want to move this from General to "Creating Nodes".

3

My HTML experience is limited, so I have not as yet got into the weeds on this. This is also cosmetic. But thanks for the suggestions, when I can will follow up. I was thinking this is a known quirk type of thing.

4

The default width style of an <input> in a .form-row element is 70%. This applies to checkboxes just as much as text inputs.

The wide box you can see is Chrome's default highlighting of the focussed element - its that wide because of the default 70% width we apply.

I've been meaning to modify the default widths to handle checkboxes separately - just not got anywhere near the top of my list of things to worry about.

For now you can, as all existing nodes do, set the width to something more palitable:

<div class="form-row">
    <label for="node-input-delay"><i class="fa fa-check"></i> Delay (ms)</label>
    <input type="checkbox" id="node-input-delay" style="width: auto;"/>
</div>
5

Oh, cool. Yeah, just was wondering. I figured it was the way the form row definition was done, but not sure about the specifics, have a lot of HTML to learn. Can't see this as anything urgent or such of course.

6

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.