I have the following code:
function createalert(content){
let divs = document.createElement('div')
let btn = document.createElement('button')
divs.id = 'alerts'
btn.id='clearbutton'
btn.textContent = 'X'
divs.textContent = content
document.body.appendChild(divs)
divs.appendChild(btn)
btn.addEventListener('click', ()=>{divs.remove()})
}
createalert('Hello, world!') #alerts{
width: 40vw;
text-align: center;
font-size: 20px;
position: absolute;
top: 1%;
left: 30%;
background:grey
}
#clearbutton{
height: 4vh;
position: relative;
left: 26%;
bottom: 10%;
color: black;
border: none;
background: transparent;
font-weight:bold ;
font-size: 25px;
}What I want to achieve it to create a custom alert using JS that include a button.
I want to make the button to be end of the div (alert) at any screen size or zoom percentage.
I try to use % and vw to acheive it, but I fail to do that, this css code will only work at my screen size.
Could anyone give me a solution to solve this?
Thanks for any responds!
You can do it by positioning, set the #alerts position relative and #clearButton position absolute and right:0; like this:
function createalert(content) {
let divs = document.createElement('div')
let btn = document.createElement('button')
divs.id = 'alerts'
btn.id = 'clearbutton'
btn.textContent = 'X'
divs.textContent = content
document.body.appendChild(divs)
divs.appendChild(btn)
btn.addEventListener('click', () => {
divs.remove()
})
}
createalert('Hello, world!')#alerts {
width: 40vw;
text-align: center;
font-size: 20px;
position: absolute;
top: 1%;
left: 30%;
background: grey;
position:relative;
}
#clearbutton {
position: absolute;
right: 0;
color: black;
border: none;
background: transparent;
font-weight: bold;
font-size: 22px;
}you can learn about this trick more https://css-tricks.com/absolute-positioning-inside-relative-positioning/
I guess the simplest is to use float.
function createalert(content) {
let container = document.createElement("div");
let btn = document.createElement("button");
container.id = "alerts";
btn.id = "clearbutton";
btn.textContent = "X";
container.textContent = content;
document.body.appendChild(container);
container.appendChild(btn);
btn.addEventListener("click", () => {
container.remove();
});
}
createalert("Hello, world!");#alerts {
width: 40vw;
text-align: center;
font-size: 20px;
position: absolute;
top: 1%;
left: 30%;
background: grey;
}
#clearbutton {
height: 4vh;
color: black;
border: none;
background: transparent;
font-weight: bold;
font-size: 25px;
float: right;
}