# Need a bit of help on making two columns in contrib node

**URL:** <https://discourse.nodered.org/t/need-a-bit-of-help-on-making-two-columns-in-contrib-node/28874>\
**Category:** Developing Nodes\
**Created:** [24 June 2020 09:48 UTC](https://discourse.nodered.org/t/need-a-bit-of-help-on-making-two-columns-in-contrib-node/28874 "2020-06-24T09:48:46Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![cymplecy](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/cymplecy/32/2773_2.png) [@cymplecy](https://discourse.nodered.org/u/cymplecy)\
**Post date:** [24 June 2020 09:48 UTC](https://discourse.nodered.org/t/need-a-bit-of-help-on-making-two-columns-in-contrib-node/28874/1 "2020-06-24T09:48:47Z")

</div>

I'm doing a PR on contrib-simpletime to add in checkboxes for the various properties - got it working but my CSS knowledge is basically look at someone else's code and copy/paste and I'm struggling to get the columns to align

Any got some time to get me started on the top two rows?

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/6/56cd70868fde8860a647dcf783455b0cb006e68e.png)

```auto
    <div class="form-row">
        <input type="checkbox" id="node-input-mydate" style="width:15px;">
        <label for="node-input-mydate" style="width:50%; display:inline"> mydate e.g. "Tue Sep 11 2018"</label>
        <span>&emsp;&emsp;&emsp;&emsp;</span>
        <input type="checkbox" id="node-input-myear" style="width:15px;">
        <label for="node-input-myyear" style="width:30%; display:inline"> myyear e.g. "2018"</label>
    </div>
    <div class="form-row">
        <input type="checkbox" id="node-input-mymonth" style="width:15px;">
        <label for="node-input-mymonth" style="width:50%; display:inline"> mymonth e.g. "Sep"</label>
        <span>&emsp;&emsp;&emsp;&emsp;</span>
        <input type="checkbox" id="node-input-mymonthn" style="width:15px;">
        <label for="node-input-mymonthn" style="width:30%; display:inline"> mymonthn e.g. "09"</label>
    </div>

```

---

<div class="post-metadata">

**Author:** ![cinhcet](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/cinhcet/32/438_2.png) [@cinhcet](https://discourse.nodered.org/u/cinhcet)\
**Post date:** [24 June 2020 10:44 UTC](https://discourse.nodered.org/t/need-a-bit-of-help-on-making-two-columns-in-contrib-node/28874/2 "2020-06-24T10:44:35Z")

</div>

I would probably do it similar to this one

```auto
<div style="display: flex;">
    <div style="flex-grow: 1;">
      <div class="form-row">
        <input type="checkbox" id="node-input-mydate" style="width:15px;">
        <label for="node-input-mydate" style="width:50%; display:inline"> mydate e.g. "Tue Sep 11 2018"</label>
      </div>
      <div class="form-row">
        <input type="checkbox" id="node-input-mymonth" style="width:15px;">
        <label for="node-input-mymonth" style="width:50%; display:inline"> mymonth e.g. "Sep"</label>
      </div>  
    </div>
    <div style="flex-grow: 1;">
      <div class="form-row">
        <input type="checkbox" id="node-input-myear" style="width:15px;">
        <label for="node-input-myyear" style="width:30%; display:inline"> myyear e.g. "2018"</label>
      </div>
      <div class="form-row">
        <input type="checkbox" id="node-input-mymonthn" style="width:15px;">
        <label for="node-input-mymonthn" style="width:30%; display:inline"> mymonthn e.g. "09"</label>
      </div>
    </div>
  </div>

```

But there might be better/simpler/more robust what ever solutions 🙂

Edit: I just copied your "input" and "label" tags, you should remove/adjust their styles, since most of them are not necessary

---

<div class="post-metadata">

**Author:** ![cymplecy](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/cymplecy/32/2773_2.png) [@cymplecy](https://discourse.nodered.org/u/cymplecy)\
**Post date:** [24 June 2020 11:27 UTC](https://discourse.nodered.org/t/need-a-bit-of-help-on-making-two-columns-in-contrib-node/28874/3 "2020-06-24T11:27:22Z")

</div>

Did the job nicely 🙂  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/d/edc88d865afc1a89ed2cd6609adac695b8c51ae8.png)

---

<div class="post-metadata">

**Author:** ![cymplecy](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/cymplecy/32/2773_2.png) [@cymplecy](https://discourse.nodered.org/u/cymplecy)\
**Post date:** [24 June 2020 11:39 UTC](https://discourse.nodered.org/t/need-a-bit-of-help-on-making-two-columns-in-contrib-node/28874/4 "2020-06-24T11:39:37Z")

</div>

But I seem to have taken a wrong turn 😆

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/8/287a2822810b0dc724c606fb96f5cef74c8b421a.jpeg)

---

<div class="post-metadata">

**Author:** ![cymplecy](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/cymplecy/32/2773_2.png) [@cymplecy](https://discourse.nodered.org/u/cymplecy)\
**Post date:** [24 June 2020 12:40 UTC](https://discourse.nodered.org/t/need-a-bit-of-help-on-making-two-columns-in-contrib-node/28874/5 "2020-06-24T12:40:07Z")

</div>

It seems to (visually) fail as soon as I add in a third row ☹

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/7/b7debb5b94cf3380f1e113cb63b645599c26c4c4.png)

```auto
  <div style="display: flex;">
    <div style="flex-grow: 1;">
      <div class="form-row">
        <input type="checkbox" id="node-input-mydate" style="width:15px;">
        <label for="node-input-mydate" style="width:50%; display:inline"> mydate e.g. "Tue Sep 11 2018"</label>
      </div>
      <div class="form-row">
        <input type="checkbox" id="node-input-mymonth" style="width:15px;">
        <label for="node-input-mymonth" style="width:50%; display:inline"> mymonth e.g. "Sep"</label>
      </div>  
    </div>
    <div style="flex-grow: 1;">
      <div class="form-row">
        <input type="checkbox" id="node-input-myear" style="width:15px;">
        <label for="node-input-myyear" style="width:30%; display:inline"> myyear e.g. "2018"</label>
      </div>
      <div class="form-row">
        <input type="checkbox" id="node-input-mymonthn" style="width:15px;">
        <label for="node-input-mymonthn" style="width:30%; display:inline"> mymonthn e.g. "09"</label>
      </div>
    </div>
    <div style="flex-grow: 1;">
      <div class="form-row">
        <input type="checkbox" id="node-input-mydom" style="width:15px;">
        <label for="node-input-mydom" style="width:30%; display:inline"> mydom e.g. "11"</label>
      </div>
      <div class="form-row">
        <input type="checkbox" id="node-input-mydoy" style="width:15px;">
        <label for="node-input-mydoy" style="width:30%; display:inline"> mydoy e.g. "86"</label>
      </div>
    </div>
  </div>

```

---

<div class="post-metadata">

**Author:** ![cinhcet](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/cinhcet/32/438_2.png) [@cinhcet](https://discourse.nodered.org/u/cinhcet)\
**Post date:** [24 June 2020 12:42 UTC](https://discourse.nodered.org/t/need-a-bit-of-help-on-making-two-columns-in-contrib-node/28874/6 "2020-06-24T12:42:34Z")

</div>

you are adding a third column 🙂  
The layout works by defining two coulmns (with the style flex-grow: 1).

---

<div class="post-metadata">

**Author:** ![cinhcet](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/cinhcet/32/438_2.png) [@cinhcet](https://discourse.nodered.org/u/cinhcet)\
**Post date:** [24 June 2020 12:45 UTC](https://discourse.nodered.org/t/need-a-bit-of-help-on-making-two-columns-in-contrib-node/28874/7 "2020-06-24T12:45:53Z")

</div>

```auto
  <div style="display: flex;">
    <div style="flex-grow: 1;">
      <div class="form-row">
        <input type="checkbox" id="node-input-mydate" style="width:15px;">
        <label for="node-input-mydate" style="display:inline"> mydate e.g. "Tue Sep 11 2018"</label>
      </div>
      <div class="form-row">
        <input type="checkbox" id="node-input-mymonth" style="width:15px;">
        <label for="node-input-mymonth" style="display:inline"> mymonth e.g. "Sep"</label>
      </div>  
      <div class="form-row">
        <input type="checkbox" id="node-input-mydom" style="width:15px;">
        <label for="node-input-mydom" style="display:inline"> mydom e.g. "11"</label>
      </div>
    </div>
    <div style="flex-grow: 1;">
      <div class="form-row">
        <input type="checkbox" id="node-input-myear" style="width:15px;">
        <label for="node-input-myyear" style="display:inline"> myyear e.g. "2018"</label>
      </div>
      <div class="form-row">
        <input type="checkbox" id="node-input-mymonthn" style="width:15px;">
        <label for="node-input-mymonthn" style="display:inline"> mymonthn e.g. "09"</label>
      </div>
      <div class="form-row">
        <input type="checkbox" id="node-input-mydoy" style="width:15px;">
        <label for="node-input-mydoy" style="display:inline"> mydoy e.g. "86"</label>
      </div>
    </div>
  </div>

```

If you want to understand what is going on, read [https://css-tricks.com/snippets/css/a-guide-to-flexbox/](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)

---

<div class="post-metadata">

**Author:** ![cymplecy](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/cymplecy/32/2773_2.png) [@cymplecy](https://discourse.nodered.org/u/cymplecy)\
**Post date:** [24 June 2020 12:58 UTC](https://discourse.nodered.org/t/need-a-bit-of-help-on-making-two-columns-in-contrib-node/28874/8 "2020-06-24T12:58:39Z")

</div>

One step forward, one step back

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/0/c061ba73a66f41b3d68efdab7d0a73fbacbfbf5d.png)

then even further back 😆

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/4/c477cc59bf5f9f62c8b77821a30ec15bd0765cc9.png)

I need to walk away from this for a while and come back later after I've done some ironing!

---

<div class="post-metadata">

**Author:** ![cinhcet](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/cinhcet/32/438_2.png) [@cinhcet](https://discourse.nodered.org/u/cinhcet)\
**Post date:** [24 June 2020 13:01 UTC](https://discourse.nodered.org/t/need-a-bit-of-help-on-making-two-columns-in-contrib-node/28874/9 "2020-06-24T13:01:44Z")

</div>

are you sure you copied my example? Because I just tested it and it works fine?

---

<div class="post-metadata">

**Author:** ![cymplecy](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/cymplecy/32/2773_2.png) [@cymplecy](https://discourse.nodered.org/u/cymplecy)\
**Post date:** [24 June 2020 15:23 UTC](https://discourse.nodered.org/t/need-a-bit-of-help-on-making-two-columns-in-contrib-node/28874/10 "2020-06-24T15:23:18Z")

</div>

Just shows what a bit of ironing can achieve...  
...and also just following instructions to the letter instead of improvising 🙂

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/e/ee11b49ca68545aa4697e1fa7e23fe9f6f6b69e0.png)

---

<div class="post-metadata">

**Author:** ![cymplecy](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/cymplecy/32/2773_2.png) [@cymplecy](https://discourse.nodered.org/u/cymplecy)\
**Post date:** [24 June 2020 15:37 UTC](https://discourse.nodered.org/t/need-a-bit-of-help-on-making-two-columns-in-contrib-node/28874/11 "2020-06-24T15:37:31Z")

</div>

Finally made it 🙂  
@cinhcet thanks for all your help 🙂  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/7/d721abd105ee4f6da274b1f9bc110fd28f3be4a9.jpeg)

---

<div class="post-metadata">

**Author:** ![cymplecy](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/cymplecy/32/2773_2.png) [@cymplecy](https://discourse.nodered.org/u/cymplecy)\
**Post date:** [24 August 2020 13:04 UTC](https://discourse.nodered.org/t/need-a-bit-of-help-on-making-two-columns-in-contrib-node/28874/13 "2020-08-24T13:04:36Z")

</div>

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