In this linked jsfiddle I have a row of two containers to which a maximum of two additional containers can be added using a button that appears beside the 2nd column.
Beneath each additional column is a button that removes the last column.
The issue is that, when a new column appears, the removal button appears and expands the spacing between the botton of the columns and the Ad Placeholder #2 which is undesirable.
I’m looking for a way of maintaining the spacing between the bottom of the columns and the top Ad Placeholder #2 such that this spacing is always the same, regardless of whether the remove buttons are visible or not, as per the diagram below.
Two initial columns are present with set spacing between columns and Ad Placeholder #2
Then when either 1 or 2 additional columns are added, the removal buttons appear without changing the spacing.
Removal buttons are added along with additional columns without displacing Ad Placeholder #2
I have attempted to add a global container to which the removal buttons are added but this does not seem to achieve the desired effect as, when the buttons are not visible the container still resizes itself.
CODE
HTML
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<!-- Add Bootstrap JavaScript and Popper.js (required for certain components) -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<!-- Add jQuery (required for Bootstrap's JavaScript) -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<body>
<style>
/* Style for the ad placeholder */
.ad-placeholder {
max-width: 728px; /* Adjust the maximum width as needed */
height: 90px; /* Adjust the height as needed */
background-color: #f0f0f0; /* Set a background color */
border: 1px solid #ccc; /* Add a border for visibility */
text-align: center;
line-height: 90px; /* Center content vertically */
font-weight: bold;
color: #666; /* Text color */
margin: 0 auto; /* Center horizontally */
margin-top: 20px; /* Add a margin to create space between the header and ad */
}
</style>
<div class="container text-center">
<div class="ad-placeholder">
<!-- You can add ad-related content or text here -->
Ad Placeholder #1
</div>
</div>
<main>
<!-- <h2>Compare Phones</h2> -->
<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-md-3">
<div class="rounded p-4" style="background-color: #e3f2fd;">
<!-- Dynamic search bar for Column 1 -->
<input type="text" class="form-control" placeholder="Enter Details">
</div>
<div class="rounded p-4 border border-light mt-2">
<!-- Content for Column 1 -->
Content #1
</div>
<div class="rounded border border-light mt-2" style="height: 400px;">
<!-- Additional content for Column 1 -->
More Content #1
</div>
<div class="text-center mt-2">
<!-- Container for Remove column buttons -->
<div class="remove-container" style="display: none;">
<!-- Remove column icon for Column 1 -->
<i class="bi bi-dash-circle remove-column" style="cursor: pointer; font-size: 2rem;"></i>
</div>
</div>
</div>
<div class="col-md-3">
<div class="rounded p-4" style="background-color: #e3f2fd;">
<!-- Dynamic search bar for Column 2 -->
<input type="text" class="form-control" placeholder="Enter Details">
</div>
<div class="rounded p-4 border border-light mt-2">
<!-- Content for Column 2 -->
Content #2
</div>
<div class="rounded border border-light mt-2" style="height: 400px;">
<!-- Additional content for Column 2 -->
More Content #2
</div>
</div>
<!-- Add more columns here -->
<div class="col-md-1">
<div class="d-flex align-items-center justify-content-center" style="height: 100%;">
<!-- Centered icon for adding a new column -->
<i id="addColumnIcon" class="bi bi-plus-circle" style="cursor: pointer; font-size: 2rem;"></i>
</div>
</div>
<div class="container text-center">
<div class="ad-placeholder">
<!-- You can add ad-related content or text here -->
Ad Placeholder #2
</div>
</div>
<!-- Use the Bootstrap icon directly with an ID and change its size -->
</div>
</main>
</body>
JAVASCRIPT
// Set a maximum of 4 columns and a minimum of 2 columns
var minTotalColumns = 2;
var maxTotalColumns = 4;
// Function to add a single column
function addColumn() {
// Check if the maximum number of total columns has been reached
if ($(".col-md-3").length < maxTotalColumns) {
// Create a new column div with the same content structure as Column 1
var newColumn = `
<div class="col-md-3">
<div class="rounded p-4" style="background-color: #e3f2fd;">
<!-- Dynamic search bar for new Column -->
<input type="text" class="form-control" placeholder="Enter Details">
</div>
<div class="rounded p-4 border border-light mt-2">
<!-- Content for new Column -->
Content #${$(".col-md-3").length + 1}
</div>
<div class="rounded border border-light mt-2" style="height: 400px;">
<!-- Additional content for new Column -->
More Content #${$(".col-md-3").length + 1}
</div>
<div class="text-center mt-2">
<!-- Container for Remove column buttons -->
<div class="remove-container">
<!-- Remove column icon for new Column -->
<i class="bi bi-dash-circle remove-column" style="cursor: pointer; font-size: 2rem;"></i>
</div>
</div>
</div>
`;
// Insert the new column to the right of the "addColumnIcon" column
$(newColumn).insertBefore(".col-md-1");
// Check the number of columns and enable/disable icons accordingly
checkColumnCount();
}
}
// Function to remove a single column
function removeColumn() {
var columns = $(".col-md-3");
// Check if the minimum number of total columns is reached
if (columns.length > minTotalColumns) {
// Remove the last column
columns.last().remove();
}
// Check the number of columns and enable/disable icons accordingly
checkColumnCount();
}
// Function to check and enable/disable icons based on column count
function checkColumnCount() {
var columns = $(".col-md-3");
if (columns.length >= maxTotalColumns) {
$("#addColumnIcon").hide();
} else {
$("#addColumnIcon").show();
}
// Enable or disable remove column icons based on the total number of columns
columns.each(function (index) {
if (index >= minTotalColumns) {
$(this).find(".remove-container").show();
} else {
$(this).find(".remove-container").hide();
}
});
}
// Add a click event handler to add a column
$("#addColumnIcon").click(addColumn);
// Add a click event handler to remove a column
$(document).on("click", ".remove-column", removeColumn);
// Initialize icons' enabled/disabled state
checkColumnCount();