Hey everyone!
Here's the issue: I have 3 tables that display lists of items. Below each list, there are 2 buttons (cancel/submit). However, when I add a row to one of the lists, the buttons move to the right inexplicably. What could be causing this strange behavior?
If anyone has a solution to this problem, it would really save me some stress: https://jsfiddle.net/sqonLbv4/
Thank you in advance
HTML
<div class="cols3">
<label for="field1">Field 1</label>
<table id="tableField1"></table>
<input id="field1" name="field1" type="text" />
<button id="field1Add" name="field1Add" class="btn btnOrange" type="button" onclick="field1Add()">Add</button>
<button id="field1Delete" name="field1Delete" class="btn btnBlack" type="button" onclick="field1Delete()">Delete last</button>
</div>
<div class="cols3">
<label for="field2">Field 2</label>
<table id="tableField2"></table>
<input id="field2" name="field2" type="text" />
<button id="field2Add" name="field2Add" class="btn btnOrange" type="button" onclick="field2Add()">Add</button>
<button id="field2Delete" name="field2Delete" class="btn btnBlack" type="button" onclick="field2Delete()">Delete last</button>
</div>
<div class="cols3">
<label for="field3">Field List 3</label>
<table id="tableField3"></table>
<input id="field3" name="field3" type="text" />
<button id="field3Add" name="field3Add" class="btn btnOrange" type="button" onclick="Field3Add()">Add</button>
<button id="field3Delete" name="field3Delete" class="btn btnBlack" type="button" onclick="field3Delete()">Delete last</button>
</div>
</div>
<div id="btnsForm" class="subcontainer">
<button id="btnCancel" name="btnCancel" class="btn btnBlack" type="button">Cancel</button>
<button id="btnSubmit" name="btnSubmit" class="btn btnOrange" type="submit">Submit</button>
</div>
JS
var field1 = document.querySelector("#field1");
function field1Add() {
var table = document.querySelector("#tableField1");
var cell = table.insertRow(0).insertCell(0);
cell.innerHTML = field1.value;
}
function field1Delete() {
var table = document.querySelector("#tableField1");
table.deleteRow(0);
}
var fieldList2 = [];
var field2 = document.querySelector("#field2");
function field2Add() {
var table = document.querySelector("#tableField2");
var cell = table.insertRow(0).insertCell(0);
cell.innerHTML = field2.value;
}
function field2Delete() {
var table = document.querySelector("#tableField2");
table.deleteRow(0);
}
var fieldList3 = [];
var field3 = document.querySelector("#field3");
function field3Add() {
var table = document.querySelector("#tableField3");
var cell = table.insertRow(0).insertCell(0);
cell.innerHTML = field3.value;
}
function field3Delete() {
var table = document.querySelector("#tableField3");
table.deleteRow(0);
}
CSS (aka the devil)
box-sizing: border-box;
}
.subcontainer {
padding: 0 2rem;
}
.cols3 {
width: 33%;
float: left;
padding: 0 0.3rem 3rem;
}
.btn {
color: #fff;
font-size: 1rem;
font-weight: 700;
background-color: transparent;
border: 1px solid transparent;
border-radius: 0;
cursor: pointer;
display: inline-block;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.btnCentered {
text-align: center;
}
.btnTitle {
vertical-align: middle;
margin-left: 2rem;
}
.btnOrange {
background-color: chocolate;
border-color: chocolate;
}
.btnOrange:hover {
color: #fff;
background-color: #000;
border-color: #000;
}
.btnBlack {
color: #000;
border-color: #000;
}
.btnBlack:hover {
color: #fff;
background-color: #000;
border-color: #000;
}
.btnBlack:active {
color: #f16e00;
border-color: #f16e00;
}
.btnsTable {
white-space: initial;
}
#btnsForm {
text-align: center;
}