HTML banner vanishes when text too long

Question

So I try to create a HTML banner with Javascript, where I map a standard accept and decline button from a websites cookie banner to a new one.

I stumbled over a strange behavior of HTML and I do not understand what happens here. When the text in textHeadline.innerHTML = "Cooki" gets ?too long? the whole banner suddenly vanishes. So if I write textHeadline.innerHTML = "Cookies are fun" the banner is gone. The same thing happens for modalDialogText.innerHTML = "Click Decline".

Here is my complete code:

globalThis.popupThePopupBanner = function(oldAccept, oldDecline) {

  parentDiv = document.createElement("div");
  parentDiv.setAttribute("style", "position: fixed !important; left: 16px !important; bottom: 16px !important;  width: 32rem; padding: 32px !important; background-color: rgb(0, 0, 0); z-index: 2001; overflow: auto; text-align: left;");


  siblingDiv = document.createElement("div");

  textDiv = document.createElement("div");
  textDiv.setAttribute("style", "text-align:left; color: rgb(255,255,255); background-color: rgb(255, 0, 0)");

  textHeadline = document.createElement("div");
  textHeadline.setAttribute("style", "text-align: center; color: rgb(255,255,255)");
  textHeadline.innerHTML = "Cook"
  modalDialogText = document.createElement("p");
  modalDialogText.innerHTML = "Click Decline";


  acceptButton = document.createElement("button");
  acceptButton.id = "acceptButton";
  acceptButton.textContent = "Accept";
  acceptButton.addEventListener('click', () => {
    oldAccept.click();
    parentDiv.style.display = 'none';
  });

  declineButton = document.createElement("button");
  declineButton.id = "declineButton";
  declineButton.textContent = "Decline";
  declineButton.addEventListener('click', () => {
    oldDecline.click();
    parentDiv.style.display = 'none';
  });

  textHeadline.appendChild(modalDialogText);

  textDiv.appendChild(textHeadline);
  textDiv.appendChild(acceptButton);
  textDiv.appendChild(declineButton);

  siblingDiv.appendChild(textDiv);

  parentDiv.appendChild(siblingDiv);

  document.body.appendChild(parentDiv);
}

globalThis.popupThePopupBanner();

This is how the banner looks like.

HTML banner vanishes when text too long

0 Answers