Francis Francis - 3 months ago 8
CSS Question

add a scroll bar to a div with innerhtml attribute

I am trying to add a scroll bar to a div with an attribute of inner html attribute but it is not working. This is the css that controls the div with an overflow of overflow: auto property. I have also tried setting the property to overflow: scroll but still did not work

.inner-container {
min-height: 400px;
display: inline-block;
overflow-y: auto;
border: 3px solid #999;
border-radius: 10px 10px 10px 10px;
}

#first-container {
height: 70%;
width: 60%;
padding-top:5px;
padding-left:5px;
margin-left: 79px;
margin-top: 15px;
}

#second-container {
height: 70%;
width: 22%;
padding-top:5px;
padding-left:5px;
}


applying the css to the html

<div id="first-container" class="inner-container">

</div>

<div id="second-container" class="inner-container">


this is how I am populating the first container with a json response

if (xhr.status === 200) {
var json = JSON.parse(response.target.responseText);
var first_container = document.getElementById('first-container');
...
}
first_container.innerHTML = first;


How can I force scroll bar on my div is my challenge.

Answer

.inner-container {
  display: inline-block;
  border: 3px solid #999;
  border-radius: 10px;
  padding: 5px 15px;
  box-sizing: border-box;
  vertical-align: top;
  overflow-y: auto;
}

#first {
  width: 50%;
  margin-right: 15px;
  max-height: 400px;
}

#second {
  width: 30%;
  max-height: 400px;
}
<div class="inner-container" id="first">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod sodales fringilla. Sed condimentum elit non urna ultricies, vitae sollicitudin lectus convallis. Cras ut dolor eget sapien auctor facilisis ut vel neque. Etiam vel nisl ex. Praesent quis euismod dui, sit amet euismod lacus. Aliquam vitae arcu at sapien mollis cursus. Morbi ultrices, urna in imperdiet venenatis, massa elit blandit mauris, ac egestas massa elit ut purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam neque purus, tincidunt eget leo ut, lacinia volutpat velit. Aenean cursus nibh blandit, feugiat purus et, euismod odio. Vestibulum ac pharetra ex.</p>
	<p>Morbi id eros tempus, malesuada nisi eu, auctor est. Proin interdum mauris sed velit consequat, eget lacinia velit mollis. Maecenas vitae diam id dolor suscipit maximus. Nam nec leo imperdiet, feugiat est non, euismod lacus. Sed sollicitudin nec risus vitae consectetur. Donec maximus nisi sollicitudin turpis dapibus, dapibus gravida sapien malesuada. Praesent at cursus odio. Donec porttitor convallis magna, ac porttitor lacus pharetra sit amet. In dictum erat at auctor dapibus. Quisque ut elit elementum, volutpat tortor in, egestas tortor. Nunc iaculis ornare congue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent dolor odio, elementum a ipsum ut, sollicitudin varius metus.</p>
	<p>Etiam nec elit nulla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla a viverra nunc. Donec placerat metus ligula, ut imperdiet ipsum hendrerit id. Etiam at porta nisl, in sodales est. Sed eget nunc mauris. Aenean vehicula dolor metus, eget aliquet nunc cursus sit amet. Maecenas tempus mi sit amet nisl molestie, in efficitur eros euismod. Nam in dictum nisi.</p>
	<p>Vestibulum tempor nisi volutpat sapien vehicula pulvinar. Curabitur in risus ut felis euismod ultricies id et nisi. Nullam quis laoreet risus. Duis dui mauris, interdum eget congue sollicitudin, dapibus id nunc. Proin placerat orci a suscipit auctor. Proin at vulputate odio. Duis porttitor libero viverra neque suscipit tincidunt. Integer eu pellentesque orci, tempus ullamcorper lectus. Ut convallis libero eu sagittis aliquam. Integer efficitur dolor augue, at elementum purus consectetur ac. Quisque vel congue felis. Vestibulum dolor justo, dapibus aliquam nulla at, condimentum sodales justo. Nullam consectetur luctus nunc, id sodales felis pellentesque eu. Quisque quis pharetra diam, eget sollicitudin urna.</p>
	<p>Donec lorem tortor, congue non sem a, malesuada cursus nunc. Sed tristique odio odio, eget fermentum velit suscipit a. Maecenas interdum mi a lectus consectetur, ac lacinia elit aliquet. Praesent turpis sapien, ultricies a risus id, sollicitudin varius urna. Nam sed ligula rutrum, bibendum sem eu, posuere odio. Cras pharetra dolor vitae mattis tincidunt. Ut dignissim tellus et purus ultricies rutrum. Phasellus id posuere dui. Proin ex neque, varius et nisi at, malesuada semper erat. Vestibulum accumsan vulputate massa sit amet euismod. Curabitur vulputate mattis tellus at suscipit. Sed a congue lacus, ut pulvinar nibh. Aenean porttitor ipsum dui, et pellentesque erat posuere in. Curabitur nulla massa, varius at porta sed, sodales at leo.</p>
</div>

<div class="inner-container" id="second">
	<p>Morbi id eros tempus, malesuada nisi eu, auctor est. Proin interdum mauris sed velit consequat, eget lacinia velit mollis. Maecenas vitae diam id dolor suscipit maximus. Nam nec leo imperdiet, feugiat est non, euismod lacus. Sed sollicitudin nec risus vitae consectetur. Donec maximus nisi sollicitudin turpis dapibus, dapibus gravida sapien malesuada. Praesent at cursus odio. Donec porttitor convallis magna, ac porttitor lacus pharetra sit amet. In dictum erat at auctor dapibus. Quisque ut elit elementum, volutpat tortor in, egestas tortor. Nunc iaculis ornare congue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent dolor odio, elementum a ipsum ut, sollicitudin varius metus.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod sodales fringilla. Sed condimentum elit non urna ultricies, vitae sollicitudin lectus convallis. Cras ut dolor eget sapien auctor facilisis ut vel neque. Etiam vel nisl ex. Praesent quis euismod dui, sit amet euismod lacus. Aliquam vitae arcu at sapien mollis cursus. Morbi ultrices, urna in imperdiet venenatis, massa elit blandit mauris, ac egestas massa elit ut purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam neque purus, tincidunt eget leo ut, lacinia volutpat velit. Aenean cursus nibh blandit, feugiat purus et, euismod odio. Vestibulum ac pharetra ex.</p>
	<p>Vestibulum tempor nisi volutpat sapien vehicula pulvinar. Curabitur in risus ut felis euismod ultricies id et nisi. Nullam quis laoreet risus. Duis dui mauris, interdum eget congue sollicitudin, dapibus id nunc. Proin placerat orci a suscipit auctor. Proin at vulputate odio. Duis porttitor libero viverra neque suscipit tincidunt. Integer eu pellentesque orci, tempus ullamcorper lectus. Ut convallis libero eu sagittis aliquam. Integer efficitur dolor augue, at elementum purus consectetur ac. Quisque vel congue felis. Vestibulum dolor justo, dapibus aliquam nulla at, condimentum sodales justo. Nullam consectetur luctus nunc, id sodales felis pellentesque eu. Quisque quis pharetra diam, eget sollicitudin urna.</p>
</div>

Comments