I have the following code
<style>
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.column {
flex: 1;
margin: 5px 5px;
text-align: center;
background-color: #f4f1ee;
border-radius: 15px;
border: 1px solid rgba(0, 0, 0, 0.2);
padding: 2px 2px;
max-width: 240px;
}
.image1 {
margin: 0 0;
max-height: 7rem;
}
.text1 {
font-weight: bold;
margin-bottom: 0.2em;
}
.button {
background-color: #8a978b;
margin: 1em 1em;
color: white;
padding: 0.8em 1em;
border: none;
border-radius: 0;
cursor: pointer;
transition: background-color 0.3s;
}
.button:hover {
background-color: #c5cfc4;
}
.button:active {
background-color: #8a978b;
transition-delay: 0.3s;
}
.button.copied {
background-color: #dc9001;
}
.column.hidden {
display: none;
}
/* Media Query for screens with max width of 720px */
@media screen and (max-width: 720px) {
.container {
flex-wrap: wrap;
justify-content: center;
}
.column {
flex-basis: 40%;
margin: 5px;
}
}
</style>
<div class="container">
<div class="column">
<img class="image1"<?php
// Get the value of the custom field using the Pods function.
$gift_method_1 = pods_field( 'undangan_web', get_the_ID(), 'gift_method_1');
// Check if the image exists before displaying it.
if ($gift_method_1) {
echo '<img src="' . $gift_method_1['guid'] . '" alt="' . $gift_method_1['post_title'] . '">';
}
?>
<p class="text1">{pods_undangan_web_atas_nama_gift_1}</p>
<p class="text2">{pods_undangan_web_rekening_gift_1}</p>
<button class="button" onclick="copyText(this)">salin no rekening</button>
</div>
<div class="column">
<img class="image1"<?php
// Get the value of the custom field using the Pods function.
$gift_method_2 = pods_field( 'undangan_web', get_the_ID(), 'gift_method_2');
// Check if the image exists before displaying it.
if ($gift_method_2) {
echo '<img src="' . $gift_method_2['guid'] . '" alt="' . $gift_method_2['post_title'] . '">';
}
?>
<p class="text1">{pods_undangan_web_atas_nama_gift_2}</p>
<p class="text2">{pods_undangan_web_rekening_gift_2}</p>
<button class="button" onclick="copyText(this)" disabled>salin no rekening</button>
</div>
<div class="column">
<img class="image1"<?php
// Get the value of the custom field using the Pods function.
$gift_method_3 = pods_field( 'undangan_web', get_the_ID(), 'gift_method_3');
// Check if the image exists before displaying it.
if ($gift_method_3) {
echo '<img src="' . $gift_method_3['guid'] . '" alt="' . $gift_method_3 ['post_title'] . '">';
}
?>
<p class="text1">{pods_undangan_web_atas_nama_gift_3}</p>
<p class="text2">{pods_undangan_web_rekening_gift_3}</p>
<button class="button" onclick="copyText(this)">salin no rekening</button>
</div>
<div class="column">
<img class="image1"<?php
// Get the value of the custom field using the Pods function.
$gift_method_4 = pods_field( 'undangan_web', get_the_ID(), 'gift_method_4');
// Check if the image exists before displaying it.
if ($gift_method_4) {
echo '<img src="' . $gift_method_4['guid'] . '" alt="' . $gift_method_4 ['post_title'] . '">';
}
?>
<p class="text1">{pods_undangan_web_atas_nama_gift_4}</p>
<p class="text2">{pods_undangan_web_alamat_gift}</p>
<button class="button" onclick="copyText(this)">salin alamat</button>
</div>
</div>
<script>
function copyText(button) {
var column = button.parentNode;
var textToCopy = column.querySelector('.text2');
if (textToCopy.innerHTML.trim() !== '') {
navigator.clipboard.writeText(textToCopy.innerHTML.trim());
button.classList.add('copied');
button.innerHTML = 'Sudah Tersalin';
}
//revert
}
function revertButtonColor(button) {
setTimeout(function(){
button.classList.remove('copied');
button.innerHTML = 'Salin Lagi?';
}, 250);
}
function copyText(button) {
var column = button.parentNode;
var textToCopy = column.querySelector('.text2');
if (textToCopy.innerHTML.trim() !== '') {
navigator.clipboard.writeText(textToCopy.innerHTML.trim());
button.classList.add('copied');
button.innerHTML = 'COPIED';
revertButtonColor(button);
}
}
//revert
function checkText() {
var columns = document.querySelectorAll('.column');
var visibleColumns = 0;
columns.forEach(function(column) {
var textToCopy = column.querySelector('.text2');
if (textToCopy.innerHTML.trim() === '') {
column.classList.add('hidden');
} else {
column.classList.remove('hidden');
visibleColumns++;
}
});
if (visibleColumns === 0) {
document.querySelector('.column .button').setAttribute('disabled', true);
} else {
document.querySelectorAll('.column .button').forEach(function(button) {
button.removeAttribute('disabled');
});
}
}
checkText();
</script>
Displayed like this
However, in the front end, it looks like this
Tried in w3school, it shows properly which means the code is correct. Right?
So, is this bug? Or do I made mistake here?
I don’t have performance plugin installed.
Browser: Chrome 110
OS: macOS / Windows / Linux / etc.
URL: Link to a page that illustrates this issue
Video: Short screen recording that illustrates this issue (free tool: jam.dev)
[Please describe this bug in as much detail as possible so we can replicate & debug this bug]
