CODEWITHSUNDEEP
javascriptjqueryhtmlcss
mario
mario

Reputation: 43

Scrolling div & insert from bottom

I need to add a scrolling bar when there is not enough space on a div. Also, I would like to insert rows from bottom of this div. I tried overflow:auto but it doesn't seem to work.

var a=0;
$(function(){
    $('#add').click(function(){
               a++;
        $('#content').append('line'+a+'<br>');
             
	});
});
#mydiv {
  position: absolute;
  top: 1%;
  bottom: 1%;
  left: 2%;
   width: 40vw;
  height: 49vh;
  max-width: 260px;
  font-size: 12px;
  border: 1px solid black;
   background-color: white;
  border-radius: 5px;
  overflow: auto;
  display: table-cell;
  text-align: center;
  vertical-align: bottom;
}
#content {
  width:100%;
  position:absolute;
  bottom:0;
   overflow: auto;
 }
#add{
  position:relative;
  top:270px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="mydiv">
  <div id="content">
 
  </div>
  
</div>
<button id="add">add</button>

Upvotes: 0

Views: 130

Answers (3)

zer00ne
zer00ne

Reputation: 43990

Applying overlflow-y: scroll should've worked but instead made the scrollbars inert on both divs (never seen that before). I removed the outer div and changed the #content div position: absolute it works great now. As content grows, the scrollbar gets longer. If you want the box to expand as the content grows, use position: relativeI also changed the dynamic content from text lines to divs.

var a=0;
$(function(){
    $('#add').click(function(){
               a++;
        $('#content').append('line'+a+'<br/>');
             
	});
});
#content {
  display: table-cell;
  position: absolute;
  /*Use relative if you want the box to expand with the content.*/
  /*position: relative;*/
  
  top: 1%;
  bottom: 1%;
  left: 2%;
  
  width: 40vw;
  max-width: 260px;
  height: 70vh;
  /*Use this if you want the box to strech to the edge */ 
  /*min-height:100%;*/

  font-size: 12px;
  border: 1px solid black;
  background-color: white;
  border-radius: 5px;
  
  text-align: center;
  vertical-align: bottom;
  bottom:0;
  overflow-y: scroll;
 }

#add {
  position:absolute;
  top:50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="content">

  
</div>
<button id="add">add</button>

Upvotes: 0

IsraGab
IsraGab

Reputation: 5185

in #content you should have the following:

 #content {
  width:100%;
  position:absolute;
  bottom:0;
   overflow: auto;
   max-height:49vh;
 }

If you want the scrolling bar to be down always, simply do in js:

var a=0;
$(function(){
    $('#add').click(function(){
               a++;
        $('#content').append('line'+a+'<br>');
        $('#content').scrollTop($(document).height());
    });
});

Here's a working FIDDLE

Upvotes: 0

Vixed
Vixed

Reputation: 3499

Add height:100% in #content. DEMO

#content{
  width:100%;
  height:100%;
  position:absolute;
  bottom:0;
  overflow: auto;
}

You can also provide a down scroll for each new element. Test this Fiddle

var a=0;
var content=$('#content');
$(function(){
    $('#add').click(function(){
            a++;
            content.append('line'+a+'<br>');
            content.scrollTop(content.height());
    });
});

Upvotes: 2

Related Questions