1

Olá, tenho uma tabela de inputs(podem ser adicionados mais com um botão) e queria que quando chegasse no rodapé, os inputs não fosse sobrepostos. Estou tentando deixar o topo e o rodapé fixos na rolagem, mas quando insiro muitos inputs para cadastro e tal, eles vão para baixo do rodapé.Tenho uma div no rodapé, tem como limitar os elementos quando chegaram nela ou perto disso? Vlw a qualquer ajuda.

1 Resposta 1

1

Fiz uma versão de como funcionaria, de uma maneira bem simples (coloque em página toda):

var DH = $(document).height();
$(window).on('resize', function() {
  DH = $(document).height();
})
$('.add').click(function() {
  var topbarH = $('.topBar').height();
  var footerH = $('.footer').height();
  var exemploH = 0;
  $('.exemplo').each(function(i) {
    exemploH += +$(this).innerHeight() + parseFloat($(this).css('margin'));
  })
  if (exemploH <= DH - topbarH - footerH - 40) {
    $('.container').append('<div class="exemplo">Aqui tem uma div</div>')
  }
})
* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}
.container {
  position: relative;
  width: 100%;
  height: calc(100vh - 120px);
  top: 60px;
}
.exemplo {
  width: 100%;
  height: 20px;
  margin: 10px 0;
  background: #333;
  color: #fff;
}
.topBar {
  width: 100%;
  height: 60px;
  background: #ccc;
  position: fixed;
  top: 0;
}
.footer {
  width: 100%;
  height: 60px;
  background: #ccc;
  position: fixed;
  bottom: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="topBar">
  <button class="add" style="padding: 10px">Adicionar</button>
</div>
<div class="container"></div>
<div class="footer"></div>

Só não há a exclusão dos elementos quando a página é redimensionada.

Se você não quiser bloquear a criação pode criar a barra de rolagem, com overflow-y: auto no div.container:

$('.add').click(function() {
    $('.container').append('<div class="exemplo">Aqui tem uma div</div>')
})
* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}
.container {
  position: relative;
  width: 100%;
  height: calc(100vh - 120px);
  top: 60px;
  overflow-y: auto;
}
.exemplo {
  width: 100%;
  height: 20px;
  margin: 10px 0;
  background: #333;
  color: #fff;
}
.topBar {
  width: 100%;
  height: 60px;
  background: #ccc;
  position: fixed;
  top: 0;
}
.footer {
  width: 100%;
  height: 60px;
  background: #ccc;
  position: fixed;
  bottom: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="topBar">
  <button class="add" style="padding: 10px">Adicionar</button>
</div>
<div class="container"></div>
<div class="footer"></div>

7
  • Obrigado pelo código, mas eu não posso implementar ele porque estou usando visualforce, poderia me explicar o que você fez e tal para eu poder fazer algo parecido ? Sou novo com jquery e não entendi muito bem o que está sendo feito.
    – DevBusy
    15/08/2016 às 15:51
  • @Bruno, agora estou de saída e por isso não expliquei. Mas posteriormente comento o código. Mas o resultado, ficou como esperava? 15/08/2016 às 16:06
  • Ah certo. No básico era isso mesmo, Mas eu vou adicionar muitos inputs e a tela não pode "bloquear" a criação deles, mas a parte da sobreposição era isso mesmo. Vlw
    – DevBusy
    15/08/2016 às 16:09
  • @Bruno. A ideia seria criar uma barra de rolagem? 15/08/2016 às 16:10
  • Sim, é bem isso que procuro.
    – DevBusy
    15/08/2016 às 16:14

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .