Limit elements when arriving in a div

Question

Limit elements when arriving in a div

Navigation

#1 by (1 votes)

1

Hello, I have a table of inputs (can be added more with a button) and wanted that when it arrived in the footer, the inputs would not be superimposed. I'm trying to get the top and the footer fixed in the scrolling, but when I insert a lot of inputs to the register and such, they go down the footer. I have a div in the footer, how can I limit the elements when they arrived in or near it? Vlw to any help.

html

asked by anonymous 15.08.2016 / 16:50

1 answer

What's the difference between these two means of getting the PackageName? How to return results with integers and nulls?

score 1 · Accepted Answer

I made a version of how it would work, in a very simple way (put it all over):

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><divclass="topBar">
  <button class="add" style="padding: 10px">Adicionar</button>
</div>
<div class="container"></div>
<div class="footer"></div>

Only elements are excluded when the page is resized.

If you do not want to block creation you can create the scroll bar, with overflow-y: auto in 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><divclass="topBar">
  <button class="add" style="padding: 10px">Adicionar</button>
</div>
<div class="container"></div>
<div class="footer"></div>