Bom, eu estou criando um sistema de cadastro de pessoas usando HTML, CSS, JAVASCRIPT a minha aplicação está funcionando normalmente, a aplicação é bem complexa e é bastante código recomendo a vocês a executar o código logo abaixo, abrindo na página toda, pois ainda não redimensionei a aplicação, mas o problema é bem simples é só posicionar o botão remover
com id="remover"
na direita em cima das tabela com a class="tabela"
, porém não está dando certo. Vejam, que o botão remover
está posicionado na direita em cima das tabela quando a página é carregada, funcionando normalmente, você realiza o cadastro das pessoas e vai cadastrando normalmente sem problema algum, porém quando você vai cadastrando as pessoas, começa a emcher de tabela na tela com as informações do usuário e com forme vai tendo muita tabela na tela ele vai sair para fora do container que é a div com id="container-de-dados"
, mas para isso não acontecer coloquei overflow: auto
para criar um scroll
, mas ao longo que você cadastra mais o menos 4 pessoas, ae que está o problema o botão remover
permanece uns 20px
a mais na direita da aonde ele estava fazendo o botão ir mais a direita e a tabela mais a esquerda e causando um scroll
horizontal e acaba estragando o layout da aplicação. Quem poder ajudar agradeço.
// Função cadastroDePessoas().
function cadastroDePessoas()
{
// Variáveis com valores fazendo referência aos id no documento html.
var body = window.document.body;
var nome = window.document.querySelector("#nome");
var cpf = window.document.querySelector("#cpf");
var nomeCorreto = window.document.querySelector("#nome-correto");
var cpfCorreto = window.document.querySelector("#cpf-correto");
var botaoCadastrar = window.document.querySelector("#botao");
var containerDeDados = window.document.querySelector("#container-de-dados");
var vazioOunao = window.document.querySelector("#titulo3");
var vermelhoEazul = window.document.querySelector("#vermelho-e-azul");
var contagemDeCadastro = 0;
// Variáveis com valores da data do sistema operacional.
var dataDoSistemaOperacional = new Date();
var hora = dataDoSistemaOperacional.getHours();
var minuto = dataDoSistemaOperacional.getMinutes();
var segundo = dataDoSistemaOperacional.getSeconds();
var ano = dataDoSistemaOperacional.getFullYear();
var mes = dataDoSistemaOperacional.getMonth();
var dia = dataDoSistemaOperacional.getDay();
// Variável com valor de objeto e contém valores de propriedades que são string.
const insercoes =
{
3 : ".",
7 : ".",
11 : "-"
};
if (hora < 10)
{
hora = "0" + hora;
}
if (minuto < 10)
{
minuto = "0" + minuto;
}
if (segundo < 10)
{
segundo = "0" + segundo;
}
if (mes < 10)
{
mes = "0" + mes;
}
if (dia < 10)
{
dia = "0" + dia;
}
// Variável nome contem o evento de input e chamara a função anônima function(){}.
nome.addEventListener("input", function()
{
// Valor de nome recebe o valor de nome convertido para maiúscula.
nome.value = nome.value.toUpperCase();
// Se o comprimento do valor de nome for igual a 50 execute este bloco se não passe para o outro.
if (nome.value.length == 50)
{
nomeCorreto.textContent = "Número máximo de caracteres atingido";
nomeCorreto.style.color = "rgb(255, 0, 0)";
}
else if (nome.value.length >= 21)
{
nomeCorreto.textContent = "Ótimo Nome"
nomeCorreto.style.color = "rgb(64, 221, 49)";
}
else if (nome.value.length > 10)
{
nomeCorreto.textContent = "Nome razoável";
nomeCorreto.style.color = "rgb(238, 170, 68)";
}
else if (nome.value.length > 0)
{
nomeCorreto.textContent = "Nome muito pequeno";
nomeCorreto.style.color = "rgb(255, 0, 0)";
}
else
{
nomeCorreto.textContent = "";
}
});
cpf.addEventListener("input", function(e)
{
let nums = cpf.value.match(/\d/g) || [];
for (let posicaoInserir of Object.keys(insercoes))
{
if (nums.length > parseInt(posicaoInserir))
{
nums.splice(parseInt(posicaoInserir), 0, insercoes[posicaoInserir]);
}
}
cpf.value = nums.join("");
if (cpf.value.length === 14)
{
cpfCorreto.textContent = "CPF no formato correto";
cpfCorreto.style.color = "rgb(64, 221, 49)";
}
else
{
cpfCorreto.textContent = "";
}
});
botaoCadastrar.addEventListener("click", function()
{
if (nome.value == "")
{
nome.style.animation = "animacaoNomeEcpf 0.3s linear";
nomeCorreto.textContent = "Nome Vazio";
nomeCorreto.style.color = "rgb(255, 0, 0)";
}
if (cpf.value == "")
{
cpf.style.animation = "animacaoNomeEcpf 0.3s linear";
cpfCorreto.textContent = "CPF Vazio";
cpfCorreto.style.color = "rgb(255, 0, 0)";
}
if (nome.value != "" && cpf.value != "")
{
criarTabelaDeDados();
function criarTabelaDeDados()
{
++ contagemDeCadastro;
vazioOunao.textContent = "";
var criarConfirmarEnegar, criarBotaoConfirmar, criarBotaoNegar,
criarBotaoRemover,
criarTable1,
criarTr1, criarTr2,
criarTh1, criarTh2, criarTh3, criarTh4, criarTh5,
criarTd1, criarTd2, criarTd3, criarTd4, criarTd5;
const simboloCorreto = String.fromCodePoint(0x02714);
const simboloChis = String.fromCodePoint(0x000D7);
criarBotaoRemover = window.document.createElement("button");
criarConfirmarEnegar = window.document.createElement("div");
criarBotaoConfirmar = window.document.createElement("div");
criarBotaoNegar = window.document.createElement("div");
criarTable1 = window.document.createElement("table");
criarTr1 = window.document.createElement("tr");
criarTr2 = window.document.createElement("tr");
criarTh1 = window.document.createElement("th");
criarTh2 = window.document.createElement("th");
criarTh3 = window.document.createElement("th");
criarTh4 = window.document.createElement("th");
criarTh5 = window.document.createElement("th");
criarTd1 = window.document.createElement("td");
criarTd2 = window.document.createElement("td");
criarTd3 = window.document.createElement("td");
criarTd4 = window.document.createElement("td");
criarTd5 = window.document.createElement("td");
criarConfirmarEnegar.setAttribute("id", "confirmarEnegar");
criarBotaoConfirmar.setAttribute("id", "confirmar");
criarBotaoNegar.setAttribute("id", "negar");
criarBotaoRemover.setAttribute("id", "remover");
criarBotaoRemover.setAttribute("type", "button");
criarBotaoRemover.textContent = "remover";
criarBotaoConfirmar.textContent = simboloCorreto;
criarBotaoNegar.textContent = simboloChis;
criarTable1.setAttribute("class", "tabela");
criarTh1.textContent = "Nº";
criarTh2.textContent = "Nome";
criarTh3.textContent = "CPF";
criarTh4.textContent = "Hora do Cadastro";
criarTh5.textContent = "Data do Cadastro";
criarTd2.textContent = nome.value;
criarTd3.textContent = cpf.value;
criarTd4.textContent = `${hora}:${minuto}:${segundo}`;
criarTd5.textContent = `${dia}/${mes}/${ano}`;
criarTable1.appendChild(criarTr1);
criarTable1.appendChild(criarTr2);
criarTr1.appendChild(criarTh1);
criarTr1.appendChild(criarTh2);
criarTr1.appendChild(criarTh3);
criarTr1.appendChild(criarTh4);
criarTr1.appendChild(criarTh5);
criarTr2.appendChild(criarTd1);
criarTr2.appendChild(criarTd2);
criarTr2.appendChild(criarTd3);
criarTr2.appendChild(criarTd4);
criarTr2.appendChild(criarTd5);
criarConfirmarEnegar.appendChild(criarBotaoConfirmar);
criarConfirmarEnegar.appendChild(criarBotaoNegar);
containerDeDados.appendChild(criarBotaoRemover);
containerDeDados.appendChild(criarConfirmarEnegar);
containerDeDados.appendChild(criarTable1);
nome.value = "";
cpf.value = "";
nomeCorreto.textContent = "";
cpfCorreto.textContent = "";
vermelhoEazul.textContent = contagemDeCadastro;
vermelhoEazul.style.backgroundColor = "rgb(0, 255, 0)";
criarBotaoRemover.addEventListener("click", function()
{
this.style.display = "none";
criarConfirmarEnegar.style.display = "block";
});
criarBotaoNegar.addEventListener("click", function()
{
criarConfirmarEnegar.style.display = "none";
criarBotaoRemover.style.display = "block";
criarBotaoRemover.style.left = "570px";
});
criarBotaoConfirmar.addEventListener("click", function()
{
criarConfirmarEnegar.style.display = "none";
containerDeDados.removeChild(criarTable1);
-- contagemDeCadastro;
vermelhoEazul.textContent = contagemDeCadastro;
if (contagemDeCadastro == 0)
{
vazioOunao.textContent = "Vazio";
vermelhoEazul.style.backgroundColor = "rgb(255, 0, 0)";
}
});
}
}
});
botaoCadastrar.addEventListener("mousedown", function()
{
nome.style.animation = "none";
cpf.style.animation = "none";
});
}
// Adicionar evento de load no window e chamar a função cadastroDePessoas().
window.addEventListener("load", cadastroDePessoas);
@charset "utf-8";
html {
background-color: rgb(88, 88, 88);
}
body {
width: auto;
height: 703px;
margin: 30px;
background-color: rgb(255, 255, 255);
border-radius: 10px;
counter-reset: contador-de-numero;
}
* {
box-sizing: border-box;
}
::selection {
background-color: rgb(209, 207, 207);
}
/* --------------------------------------------- Cadastro de pessoas --------------------------------------------- */
#cadastro-de-pessoas {
width: 50%;
height: 100%;
/* border: 1px solid black; */
border-radius: 10px 0 0 10px;
border-right: 1px solid rgb(175, 175, 175);
font-family: Arial, Helvetica, sans-serif;
text-align: center;
padding: 50px;
color: rgb(100, 100, 100);
float: left;
}
#nome, #cpf {
width: 100%;
font-size: 20px;
border: 2px solid rgb(77, 74, 74);
border-radius: 20px;
outline: none;
padding: 10px 10px 10px 20px;
margin-bottom: 15px;
/* background-image: url("../imagem/correto.png"); */
background-repeat: no-repeat;
background-size: 50px 40px;
background-position: 99% 0;
position: relative;
}
#nome:hover, #cpf:hover {
background-color: rgb(245, 241, 241);
}
#nome:focus, #cpf:focus {
background-color: rgb(245, 241, 241);
}
#nome-correto, #cpf-correto, #nota3 {
text-align: left;
margin: 0;
margin-bottom: 15px;
}
@keyframes animacaoNomeEcpf {
0%
{
left: 0;
}
50%
{
left: -10px;
}
100%
{
left: 10px;
background-color: rgb(245, 215, 215);
border: 2px solid rgb(255, 0, 0);
}
}
#botao {
width: 100%;
height: 50px;
border: none;
border-radius: 20px;
outline: none;
cursor: pointer;
font-size: 20px;
background-color: rgb(51, 51, 224);
color: rgb(255, 255, 255);
}
#botao:hover {
background-color: rgb(73, 73, 221);
}
#vermelho-e-azul {
background-color: rgb(255, 0, 0);
color: rgb(255, 255, 255);
padding: 5px 10px;
border-radius: 10px;
}
/* --------------------------------------------- Pessoas de Cadastradas --------------------------------------------- */
#pessoas-cadastradas {
width: 50%;
height: 100%;
/* border: 1px solid black; */
border-radius: 0 10px 10px 0;
border-left: 1px solid rgb(175, 175, 175);
font-family: Arial, Helvetica, sans-serif;
text-align: center;
padding: 50px;
color: rgb(100, 100, 100);
float: left;
}
#container-de-dados {
width: auto;
height: 90%;
border: 1px dashed rgb(175, 175, 175);
overflow: auto;
position: relative;
box-sizing: border-box;
}
#titulo3 {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
margin: 0;
}
.tabela {
width: 100%;
height: 100px;
border: 1px solid black;
border-collapse: collapse;
font-size: 14px;
cursor: pointer;
white-space: nowrap;
margin-bottom: 30px;
}
#remover {
position: relative;
height: 23px;
/* left: 286px; */
left: 284px;
cursor: pointer;
background-color: rgb(201, 201, 201);
border: none;
color: rgb(102, 102, 102);
font-weight: bolder;
border-radius: 5px 5px 0 0;
transition: background-color 0.4s linear;
outline: none;
}
/* ------------------------------------------------------------------------------------- */
#confirmarEnegar {
width: 60px;
height: 23px;
border-radius: 5px 5px 0 0;
border: 1px solid rgb(100, 100, 100);
position: relative;
left: 574px;
display: none;
}
#confirmar, #negar {
width: 50%;
height: auto;
float: left;
color: rgb(0, 0, 0);
}
#confirmar {
border-right: 1px solid rgb(100, 100, 100);
background-color: rgb(0, 255, 0);
border-radius: 5px 0 0 0;
}
#negar {
border-left: 1px solid rgb(100, 100, 100);
background-color: rgb(255, 0, 0);
border-radius: 0 5px 0 0;
font-size: 19px;
}
#confirmar:hover {
cursor: pointer;
background-color: rgb(16, 190, 16);
}
#negar:hover {
cursor: pointer;
background-color: rgb(192, 19, 19);
}
/* ------------------------------------------------------------------------------------- */
#remover:hover {
background-color: rgb(173, 173, 173);
color: rgb(80, 79, 79);
}
th {
background-color: rgb(88, 88, 88);
color: rgb(255, 255, 255);
}
th, td {
padding: 5px;
border: 1px solid rgb(175, 175, 175);
transition: background-color 0.4s linear;
}
th:hover {
background-color: rgb(102, 101, 101);
}
th:nth-child(1), td:nth-child(1) {
background-color: rgb(146, 145, 145);
color: rgb(255, 255, 255);
}
th:nth-child(1):hover, td:nth-child(1):hover {
background-color: rgb(170, 169, 169);
}
td:nth-child(1)::after {
counter-increment: contador-de-numero;
content: counter(contador-de-numero);
}
td:hover {
background-color: rgb(245, 241, 241);
}
<!doctype html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="author" content="Leandro do Nascimento">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="js/script.js"></script>
<title>Cadastro de Pessoas</title>
</head>
<body>
<div id="cadastro-de-pessoas">
<h1 id="titulo1">Cadastro de Pessoas</h1>
<input id="nome" type="text" autocomplete="off" placeholder="Nome Completo:" minlength="8" maxlength="50">
<p id="nome-correto"></p>
<input id="cpf" type="text" maxlength="14" placeholder="CPF:">
<p id="cpf-correto"></p>
<p id="nota3"></p>
<button id="botao" type="button">Cadastrar</button>
<p id="cadastrado">Número de pessoas cadastradas: <span id="vermelho-e-azul">0</span></p>
</div>
<div id="pessoas-cadastradas">
<h1 id="titulo2">Pessoas Cadastradas</h1>
<div id="container-de-dados">
<h1 id="titulo3">Vazio</h1>
</div>
</div>
</body>
</html>
white-space: nowrap;
da.tabela
parece ter resolvido, testa ai