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

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

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

I would probably do it similar to this one

<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 :slight_smile:

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

1 Like

Did the job nicely :slight_smile:
image

But I seem to have taken a wrong turn :laughing:

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

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

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

  <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/

1 Like

One step forward, one step back

then even further back :laughing:

image

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

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

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

Finally made it :slight_smile:
@cinhcet thanks for all your help :slight_smile:
image

3 Likes