Paragraph not scrollable after innerHTML changed to longer text?

Question

I have a simple paragraph in html with overflow: scroll; in the css. I then do a simple document.getElementById(id).innerHTML = new HTML and change the initially little text to a much longer paragraph. The scroll feature then doesn't 'update' (not sure if this is correct terminology). I tried just adding the class again in jQuery but that bodge failed, what is the 'correct' way to do this.

Answer 1

You need to define max-height of p tag & overflow-y:auto for vertically scrolling.

 function addText(id){ document.getElementById(id).innerHTML = 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias praesentium veniam, fugit, id asperiores pariatur neque, ullam iste dignissimos natus molestias ab. Fugiat voluptates in soluta porro inventore minima similique deserunt quidem aliquid rem fugit corporis, qui error laboriosam atque, esse neque libero quam quisquam doloremque. Commodi aliquid, id asperiores ullam est error consequuntur labore vel cupiditate, assumenda, neque beatae tempora amet. Amet, animi provident explicabo ea deserunt dolore itaque assumenda ipsa vitae numquam suscipit saepe eius deleniti repellat exercitationem libero maiores aliquid ducimus odio nesciunt placeat esse quaerat iure. Amet consequatur quasi ab, Consequuntur inventore eum dolor quos deleniti nisi nostrum. dignissimos laborum reprehenderit mollitia in, Inventore labore saepe distinctio consequuntur non assumenda necessitatibus recusandae fugiat exercitationem. ipsa nesciunt ducimus reprehenderit sapiente earum voluptatum autem sequi blanditiis similique alias quasi voluptatem, Doloribus reprehenderit? quos vitae omnis sunt doloremque, Eligendi vitae distinctio ea ex alias commodi, pariatur. unde laborum sint molestias ipsa, Doloremque doloribus necessitatibus blanditiis laudantium, iusto eius perspiciatis odio voluptate maxime sit, maiores aspernatur delectus adipisci illum explicabo praesentium. veniam porro exercitationem magni ullam libero distinctio, Deleniti porro eius? quaerat consequatur a illo repellendus consectetur nesciunt aliquid adipisci dignissimos ratione, Dolorem iure magnam repellendus, Illum sit quam impedit unde id provident sunt. blanditiis iusto rerum omnis architecto. voluptatum perspiciatis distinctio praesentium quia, Eaque a minus assumenda aliquam enim qui totam consequuntur veniam sed vero. Maiores eveniet minus exercitationem tempore dolor minima magnam iure, Nisi, voluptas, Dicta iste quia ducimus minus suscipit molestiae quaerat delectus temporibus quas? maiores harum eum tempore dolorum cumque in laborum est aliquam, beatae mollitia ea vitae. Quam ipsa nostrum eligendi, obcaecati voluptate recusandae placeat iste libero distinctio quisquam? Molestias distinctio eligendi alias voluptate sunt cum, voluptatum adipisci aliquid; Consequatur enim minima incidunt illum corrupti porro ipsam dolorem similique quia nihil! Enim, sapiente? Enim, illo!'; }

 p{ border: 1px solid #ccc; width: 200px; max-height: 140px; padding: 15px; overflow: hidden; overflow-y: auto; }

 <p id="paragraph">This is sort text...</p> <button type="button" onclick="addText('paragraph')">Add More Text</button>