How to make the button always right at the top inside the div?

Question

function customAlert(customMessage)
{
    var interface = window.document.createElement("div");
    var button = window.document.createElement("button");
    var paragraph = window.document.createElement("p");
    var body = window.document.body;

    interface.style.width = "300px";
    interface.style.height = "200px";
    interface.style.backgroundColor = "rgb(80, 80, 80)";
    interface.style.position = "absolute";
    interface.style.left = "50%";
    interface.style.transform = "translateX(-50%)";
    interface.style.borderRadius = "10px";
    interface.style.overflowX = "scroll";

    button.textContent = "X";
    button.style.border = "none";
    button.style.backgroundColor = "rgb(255, 0, 0)";
    button.style.color = "rgb(255, 255, 255)";
    button.style.width = "30px";
    button.style.height = "30px";
    button.style.float = "right";
    button.style.cursor = "pointer";
    button.style.borderRadius = "0 10px 0 0";
    button.style.outline = "none";

    paragraph.style.fontFamily = "arial";
    paragraph.style.color = "rgb(255, 255, 255)";
    paragraph.style.position = "absolute";
    paragraph.style.left = "53%";
    paragraph.style.top = "40%";
    paragraph.style.transform = "translateX(-53%) translateY(-40%)";
    paragraph.style.fontSize = "14px";

    if (customMessage == "") {
        paragraph.textContent = "Está mensagem não diz nada!";
    } else {
        paragraph.textContent = customMessage;
    }

    button.addEventListener("mouseenter", function()
    {
        button.style.backgroundColor = "rgb(255, 90, 90)";
    });

    button.addEventListener("mouseout", function()
    {
        button.style.backgroundColor = "rgb(255, 0, 0)";
    });

    button.addEventListener("click", function()
    {
        body.removeChild(interface);
    });

    interface.appendChild(button);
    interface.appendChild(paragraph);
    body.appendChild(interface);
}

customAlert();

First of all, yes I did all this with Javascript and the file is external. But what happens to the button it does not stand perfectly right when the text within the parameter customMessage starts increasing. If you run customAlert("E alguma coisa!"); in the console they see that it works perfectly, but if it’s something like customAlert("sdededededededededededededededede"); the button starts rolling along with the text and is no longer right. I have tested almost everything and it does not remain right who can help thank.

Answer 1

You would have to create another parent div and put the button inside it, not the scroll div that contains the paragraph.

Then you will also have to change some properties. In the example below I created the div container and put the div interface inside it, as well as the button, which was left with position absolute positioned in the upper right corner of the parent div, something like that:

---------- container ----------
|                     ------- |
|                     |botão| |
|                     ------- |
| -------- interface -------- |
| |                         | |
| |                         | |
| |    <p>parágrafo</p>     | |
| |                         | |
| |                         | |
| --------------------------- |
-------------------------------

function customAlert(customMessage)
{
    var container = window.document.createElement("div");
    var interface = window.document.createElement("div");
    var button = window.document.createElement("button");
    var paragraph = window.document.createElement("p");
    var body = window.document.body;

    container.style.width = "300px";
    container.style.height = "200px";
    container.style.position = "absolute";
    container.style.left = "50%";
    container.style.transform = "translateX(-50%)";

    interface.style.width = "100%";
    interface.style.height = "100%";
    interface.style.backgroundColor = "rgb(80, 80, 80)";
    interface.style.borderRadius = "10px";
    interface.style.overflowX = "scroll";
    interface.style.position = "relative";

    button.textContent = "X";
    button.style.border = "none";
    button.style.backgroundColor = "rgb(255, 0, 0)";
    button.style.color = "rgb(255, 255, 255)";
    button.style.width = "30px";
    button.style.height = "30px";
    button.style.position = "absolute";
    button.style.top = "0";
    button.style.right = "0";
    button.style.cursor = "pointer";
    button.style.borderRadius = "0 10px 0 0";
    button.style.outline = "none";

    paragraph.style.fontFamily = "arial";
    paragraph.style.color = "rgb(255, 255, 255)";
    paragraph.style.position = "absolute";
    paragraph.style.left = "53%";
    paragraph.style.top = "40%";
    paragraph.style.transform = "translateX(-53%) translateY(-40%)";
    paragraph.style.fontSize = "14px";

    if (customMessage == "") {
        paragraph.textContent = "Está mensagem não diz nada!";
    } else {
        paragraph.textContent = customMessage;
    }

    button.addEventListener("mouseenter", function()
    {
        button.style.backgroundColor = "rgb(255, 90, 90)";
    });

    button.addEventListener("mouseout", function()
    {
        button.style.backgroundColor = "rgb(255, 0, 0)";
    });

    button.addEventListener("click", function()
    {
        body.removeChild(container);
    });

    container.appendChild(interface);
    container.appendChild(button);
    interface.appendChild(paragraph);
    body.appendChild(container);
}

customAlert("1ahgashgsagashgashgashgashgashgashgahsghsaghasghasghasghasghagashgas0");

Answer 2

Viewing here, the button never walks. I saw in 4 different browsers. But in case you have problems with the button walking. You can use position:Absolute on it and take off the float. Example: Jsfiddle

button.textContent = "X";
button.style.border = "none";
button.style.backgroundColor = "rgb(255, 0, 0)";
button.style.color = "rgb(255, 255, 255)";
button.style.width = "30px";
button.style.height = "30px";
button.style.position = "absolute";
button.style.right = 0;
button.style.top = 0;
button.style.cursor = "pointer";
button.style.borderRadius = "0 10px 0 0";
button.style.outline = "none";