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?
<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>    </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>    </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 
Edit: I just copied your "input" and "label" tags, you should remove/adjust their styles, since most of them are not necessary
1 Like
But I seem to have taken a wrong turn 
It seems to (visually) fail as soon as I add in a third row 
<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
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
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
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.
