# C in properties view of a node?

**URL:** <https://discourse.nodered.org/t/c-in-properties-view-of-a-node/31296>\
**Category:** Developing Nodes\
**Created:** [8 August 2020 02:06 UTC](https://discourse.nodered.org/t/c-in-properties-view-of-a-node/31296 "2020-08-08T02:06:48Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Nodi.Rubrum](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nodi.rubrum/32/107482_2.png) [@Nodi.Rubrum](https://discourse.nodered.org/u/Nodi.Rubrum)\
**Post date:** [8 August 2020 02:06 UTC](https://discourse.nodered.org/t/c-in-properties-view-of-a-node/31296/1 "2020-08-08T02:06:48Z")

</div>

Is there something I am doing wrong when using checkboxes in properties view of a node?  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/6/86cf3ecf268eb4b72fe999a97d3e588cc242c5a2.png)  
When I check or uncheck the box, I get this rectangle artifact? Below is the HTML fragment for the check box...

```auto
        <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?

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [9 August 2020 16:06 UTC](https://discourse.nodered.org/t/c-in-properties-view-of-a-node/31296/2 "2020-08-09T16:06:08Z")

</div>

Have you checked devtools to see what is driving that?

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

---

<div class="post-metadata">

**Author:** ![Nodi.Rubrum](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nodi.rubrum/32/107482_2.png) [@Nodi.Rubrum](https://discourse.nodered.org/u/Nodi.Rubrum)\
**Post date:** [10 August 2020 00:35 UTC](https://discourse.nodered.org/t/c-in-properties-view-of-a-node/31296/3 "2020-08-10T00:35:23Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [10 August 2020 19:57 UTC](https://discourse.nodered.org/t/c-in-properties-view-of-a-node/31296/4 "2020-08-10T19:57:51Z")

</div>

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:

```auto
<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>

```

---

<div class="post-metadata">

**Author:** ![Nodi.Rubrum](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nodi.rubrum/32/107482_2.png) [@Nodi.Rubrum](https://discourse.nodered.org/u/Nodi.Rubrum)\
**Post date:** [11 August 2020 01:15 UTC](https://discourse.nodered.org/t/c-in-properties-view-of-a-node/31296/5 "2020-08-11T01:15:50Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [10 October 2020 01:15 UTC](https://discourse.nodered.org/t/c-in-properties-view-of-a-node/31296/6 "2020-10-10T01:15:57Z")

</div>

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