We Keep Coding

search and mark words in a pair tag textarea

I tried accessing a textarea tag to search and highlight the text but it didn't work. I'm a newbie, hope you guys can help me.
i want to intervene in textarea tag to search word and highlight word but its quite difficult for a newbie like me, i succeeded when it is a text but its in editor not.
i want to intervene in textarea tag to search word and highlight word but its quite difficult for a newbie like me, i succeeded when it is a text but its in editor not.
i want to intervene in textarea tag to search word and highlight word but its quite difficult for a newbie like me, i succeeded when it is a text but its in editor not.
function findThe(a, b){
console.log(a);
var x = document.getElementById("myTextarea");
if(a){
// var wholeWordOnly = new RegExp("\\g" + a + "\\g","ig"); //Matches whole word only
// var anyCharacter = new RegExp("\\g[" + a + "]\\g","ig"); //Matches any word with any of search chars characters
var x = document.getElementById("myTextarea");
var c = (typeof(b) !== "undefined" && b != null) ? b : document.getElementsByTagName('body')[0];
var d = new RegExp(a, "ig");
var matches = c.innerText.match(d);
if(matches){
if(typeof(document.querySelector('.highlighted')) !== "undefined" && document.querySelector('.highlighted') != null){
for(var i = 0; i < document.querySelectorAll('.highlighted').length; i++){
document.querySelectorAll('.highlighted')[i].outerHTML = document.querySelectorAll('.highlighted')[i].innerText;
}
}
c.innerHTML = c.innerHTML.replace(d, "<span class='highlighted'>" + a + "</span>");
if(document.querySelector('.highlighted')){
document.querySelector('.highlighted').scrollIntoView();
}
return true;
}
}
return false;
}
function fSearch(){
if(!findThe(document.getElementById('search-term').value)){
alert("No results found");
}
}
.highlighted{background-color:#f1f100}
<?php
$text = '<h1>At dolor cumque hic dolorem commodi eos facilis ipsum. </h1>
<p>Et odio doloremque est harum possimus est tempore culpa est dolores labore et molestiae laudantium in nesciunt veniam! Ut totam laboriosam ea iste suscipit a voluptate sunt ut eveniet rerum? Ea iusto quia eos possimus nostrum 33 harum dignissimos. Qui dolores possimus <em>Eos galisum rem sequi laboriosam non consequatur voluptatem</em>. Hic minus temporibuseos minima aut eligendi repellat. Qui consequuntur dicta et obcaecati aspernatur sed temporibus iusto non reiciendis ipsum. Et autem excepturi est galisum obcaecati Aut enim ea libero ipsam ab officia consequuntur. Ut voluptatem ipsa eum quibusdam ipsa et laboriosam quibusdam id consectetur voluptatem et fugit dignissimos cum architecto quaerat. </p>
<ul>
<li>Ut fuga omnis eos internos autem! </li>
<li>Quo nobis nihil sit debitis rerum et libero accusamus. </li>
<li>Est enim similique ut deserunt voluptatem qui sint mollitia. </li>
<li>Qui molestiae tempore ut laboriosam dolorum a libero aspernatur qui sapiente voluptas. </li>
</ul>
<h2>Et similique libero est dolorem ipsam et impedit repudiandae. </h2>
<p>Ut deserunt deleniti non voluptas autem in numquam nulla. Qui voluptates voluptatem quo eligendi debitis non incidunt officiis quo rerum debitis ut eaque animi. Non dolorem cumque qui quasi animi sed animi enim. Ad sint reiciendis ex iste esse ea rerum ipsum aut ipsam similique sed accusantium animi eos doloremque totam? Eum blanditiis animi et consequatur tempora Aut necessitatibus. Rem ullam omnis et facere obcaecati <strong>Et doloribus hic quisquam earum qui autem odio et labore enim</strong> qui velit vero. Quo dolore dolor qui ratione nulla sed optio nemo. Non voluptates culpa aut quasi aliquam et quibusdam eaque et laudantium nesciunt. </p>
<ol>
<li>Ut molestiae distinctio qui velit tenetur. </li>
<li>Qui possimus excepturi a maiores repellendus sit quibusdam sunt hic nesciunt illo. </li>
<li>Rem dolor tempora sed molestiae quae et quaerat voluptatem. </li>
<li>Ex reiciendis soluta quo iusto omnis aut laboriosam repudiandae et cumque unde. </li>
<li>Non porro aliquid aut nostrum optio. </li>
</ol>
<dl>
<dt><dfn>Et voluptatum sint qui nulla voluptas. </dfn></dt>
<dd>Id doloribus nemo est numquam doloremque. </dd>
<dt><dfn>In minus atque quo debitis numquam. </dfn></dt>
<dd>Non cumque sunt et sunt cumque ex commodi exercitationem! </dd>
<dt><dfn>Et tempora quis et sunt incidunt. </dfn></dt>
<dd>Eos voluptatem asperiores hic iure facere et odio officia? </dd>
<dt><dfn>Sit velit itaque. </dfn></dt>
<dd>Ea corrupti voluptate et dolore iure sed dignissimos accusamus. </dd>
</dl>
<h3>Eum ducimus labore vel doloribus nihil sed blanditiis repellat. </h3>
<p>Non exercitationem voluptatem <em>Nam nulla eum facere Quis ut magni quidem</em> rem facere incidunt. Delectus molestiae id quae ullam qui laboriosam itaque. Vel dolorem adipisci aut dicta assumenda quo enim voluptatibus non recusandae voluptatem. Et doloremque excepturi et minus suscipit est consequatur eveniet qui maiores natus. Et temporibus quam qui atque laborum qui quia voluptas qui iusto quis. At quia sunt ad quae autem aut odit dolores aut rerum quisquam vel repellendus expedita ad deserunt consequatur ut dolor odio. Qui labore odio et pariatur veniamsed animi. Ut dolorem corrupti et natus iure sed expedita tenetur et iure saepe et Quis soluta aut voluptatem officiis. </p>
<blockquote cite="https://www.loremipzum.com">Et modi modi eos voluptas doloribus non nisi culpa et esse eaque! </blockquote>
<pre><code><!-- Et sunt odit vel corporis reprehenderit. --><br><corrupti>Qui asperiores incidunt.</corrupti><br><sint>Non omnis commodi est tempora quia.</sint><br><hic>Aut omnis molestias nam doloribus numquam a voluptas consequatur.</hic><br><et>Et repudiandae error At aliquid modi.</et><br></code></pre>';
?>
<textarea class="form-control tinymce-field-content" id="meta_content" name="content"><?= $text;
?> </textarea>
<form action="#">
<input type="text" id="search-term" />
<button type="submit" id="search-button" onclick="fSearch()">Search!</button>
</form>
.highlighted{background-color:#f1f100};

How to scroll to top of webpage page at load on page with autofocus elements

I'm trying to display pages with autofocus elements, but have the pages display starting at the very top of the page. However, the autofocus seems to focus after the onload event fires. The following snippet of code demonstrates this behavior. Is there a way to trigger the scrolling after the autofocus scroll?
I don't have a lot of control over the html, so I'm limited in my ability to edit it, but I can inject js into it. My backup is to use js to query the page for elements with autofocus, strip the autofocus from the element, and then do a element.focus({preventScroll: true}) on load.
<!DOCTYPE html><html>
<head><meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>demo</title>
</head>
<body><article class="markdown-body">
<!-- This next line should scroll to the top of the page on load, but the page still autofocuses on the button after load -->
<script>
function scrollToTopOfPage() {window.scrollTo(0,0);}
window.onload=scrollToTopOfPage()
</script>
<h1 id="lorem-ipsum">Lorem Ipsum<a class="headerlink" href="#lorem-ipsum" title="Permanent link"></a></h1>
<p>Quis sit adipisci unde tempore corporis fugit. Ad commodi illo numquam nam adipisci nihil. Totam debitis quia quos eius et. Quo dolor consequatur itaque temporibus fugit qui.</p>
<p>Ratione quos nesciunt quas consequuntur consequatur. Sit cupiditate veniam soluta tempora eum in sequi modi. Consequatur animi consequatur est omnis sint. Sunt in omnis amet et ut distinctio et quia. Non repellendus ut aut aliquam vitae esse dolores non.</p>
<p>Id aut quo repellendus est quasi esse sunt ipsum. Vitae quo cupiditate voluptas ut quis error quibusdam eveniet. Totam quaerat ipsam voluptas. Necessitatibus molestias aut ex non. Similique et iusto aperiam eveniet debitis quas quis fuga. Debitis sapiente eius est dolorem.</p>
<p>Laudantium eum expedita et. Hic voluptatem ut nulla magni quae. Non tempore vel sapiente enim aut. Molestiae qui rerum reiciendis fugit quasi enim. Atque ipsum et sint omnis fugiat facere assumenda.</p>
<p>Quidem qui in neque itaque praesentium rerum molestias exercitationem. Veritatis ipsam in expedita magni quibusdam maxime. Consectetur aut nesciunt reiciendis maxime quia dolorem. Fuga tempore et veritatis aut.</p>
<p>Asperiores dicta sit consectetur. Id omnis rem et qui ullam nesciunt. Et officiis amet deleniti aut sint sunt nemo. Ullam recusandae et debitis eaque rem itaque et pariatur. Beatae at aut fugiat tempora aliquid suscipit. Incidunt sapiente ut sed debitis.</p>
<p>Incidunt magni earum voluptatum dolorem. Amet ducimus harum possimus doloremque aut. Consequatur consequuntur tempora omnis tempora rem ea. Eaque ut ea illum sed eligendi autem quae. Ipsam occaecati dolor dolorem ea est. Modi vitae in eaque voluptatem.</p>
<p>Consequatur sit suscipit dolorum velit sit voluptatem quo. Porro ut inventore veniam cumque et in voluptas. Cum ipsa dicta dolorum aut. Pariatur vitae atque eum et provident id officia ducimus. Non et a molestias consequatur.</p>
<p>Quo nulla praesentium at neque iste alias animi placeat. Quas numquam aut illum vel facere dignissimos rerum. Id laboriosam expedita est maxime ullam sint.</p>
<p>Culpa sapiente est nostrum pariatur modi numquam distinctio sed. Eaque amet vitae nemo enim ea qui. Quibusdam in quas quasi suscipit rerum dolores consequatur. Sapiente minus dolorem sint. Est quos ipsa mollitia qui.</p>
<h1 id="buttons">Buttons<a class="headerlink" href="#buttons" title="Permanent link"></a></h1>
<p>
<button autofocus>Ok</button>
<button>Cancel</button>
<button onclick=scrollToTopOfPage()>Scroll to top of page</button>
</p>
</article></body>
</html>

Search word and scroll smoothly on page

My client wants to add a search box on specific pages that will allow their user to search for a question and it will scroll to that text. This way it's easier for him to direct clients to the right part of the FAQ question.
After searching keyword "order", the function scrolls and highlights "order" on page, but the dropdown stops working and we have to refresh the page to start searching from the beginning.
I am looking for a function in which it scrolls smoothly and don't have to refresh the page to search another keyword.
Any advice on how to accomplish this?
<input type="text" id="search-term" />
<input type="submit" id="search-button" value="search" />
function searchAndHighlight(searchTerm, selector) {
if(searchTerm) {
// var wholeWordOnly = new RegExp("\\g"+searchTerm+"\\g","ig"); //matches whole word only
//var anyCharacter = new RegExp("\\g["+searchTerm+"]\\g","ig"); //matches any word with any of search chars characters
var selector = selector || ".faq" ; //use body as selector if none provided
var searchTermRegEx = new RegExp(searchTerm,"ig");
var matches = $(selector).text().match(searchTermRegEx);
if(matches) {
$('.highlighted').removeClass('highlighted'); //Remove old search highlights
$(selector).html($(selector).html()
.replace(searchTermRegEx, "<span class='highlighted'>"+searchTerm+"</span>"));
if($('.highlighted:first').length) { //if match found, scroll to where the first one appears
$(window).scrollTop($('.highlighted:first').offset().top);
}
return true;
}
}
return false;
}
$(document).ready(function() {
$('#search-button').on("click",function() {
if(!searchAndHighlight($('#search-term').val())) {
alert("No results found");
}
});
});

This worked for me:
// instead of: $(window).scrollTop($('.highlighted:first').offset().top);
// use this:
$('.highlighted:first')[0].scrollIntoView();

Your fixed script is here; Hope to be useful:
function findThe(a, b){
console.log(a);
if(a){
// var wholeWordOnly = new RegExp("\\g" + a + "\\g","ig"); //Matches whole word only
// var anyCharacter = new RegExp("\\g[" + a + "]\\g","ig"); //Matches any word with any of search chars characters
var c = (typeof(b) !== "undefined" && b != null) ? b : document.getElementsByTagName('body')[0];
var d = new RegExp(a, "ig");
var matches = c.innerText.match(d);
if(matches){
if(typeof(document.querySelector('.highlighted')) !== "undefined" && document.querySelector('.highlighted') != null){
for(var i = 0; i < document.querySelectorAll('.highlighted').length; i++){
document.querySelectorAll('.highlighted')[i].outerHTML = document.querySelectorAll('.highlighted')[i].innerText;
}
}
c.innerHTML = c.innerHTML.replace(d, "<span class='highlighted'>" + a + "</span>");
if(document.querySelector('.highlighted')){
document.querySelector('.highlighted').scrollIntoView();
}
return true;
}
}
return false;
}
function fSearch(){
if(!findThe(document.getElementById('search-term').value)){
alert("No results found");
}
}
.highlighted{background-color:#f1f100}
<!-- Page Content -->
<h1>At dolor cumque hic dolorem commodi eos facilis ipsum. </h1>
<p>Et odio doloremque est harum possimus est tempore culpa est dolores labore et molestiae laudantium in nesciunt veniam! Ut totam laboriosam ea iste suscipit a voluptate sunt ut eveniet rerum? Ea iusto quia eos possimus nostrum 33 harum dignissimos. Qui dolores possimus <em>Eos galisum rem sequi laboriosam non consequatur voluptatem</em>. Hic minus temporibuseos minima aut eligendi repellat. Qui consequuntur dicta et obcaecati aspernatur sed temporibus iusto non reiciendis ipsum. Et autem excepturi est galisum obcaecati Aut enim ea libero ipsam ab officia consequuntur. Ut voluptatem ipsa eum quibusdam ipsa et laboriosam quibusdam id consectetur voluptatem et fugit dignissimos cum architecto quaerat. </p>
<ul>
<li>Ut fuga omnis eos internos autem! </li>
<li>Quo nobis nihil sit debitis rerum et libero accusamus. </li>
<li>Est enim similique ut deserunt voluptatem qui sint mollitia. </li>
<li>Qui molestiae tempore ut laboriosam dolorum a libero aspernatur qui sapiente voluptas. </li>
</ul>
<h2>Et similique libero est dolorem ipsam et impedit repudiandae. </h2>
<p>Ut deserunt deleniti non voluptas autem in numquam nulla. Qui voluptates voluptatem quo eligendi debitis non incidunt officiis quo rerum debitis ut eaque animi. Non dolorem cumque qui quasi animi sed animi enim. Ad sint reiciendis ex iste esse ea rerum ipsum aut ipsam similique sed accusantium animi eos doloremque totam? Eum blanditiis animi et consequatur tempora Aut necessitatibus. Rem ullam omnis et facere obcaecati <strong>Et doloribus hic quisquam earum qui autem odio et labore enim</strong> qui velit vero. Quo dolore dolor qui ratione nulla sed optio nemo. Non voluptates culpa aut quasi aliquam et quibusdam eaque et laudantium nesciunt. </p>
<ol>
<li>Ut molestiae distinctio qui velit tenetur. </li>
<li>Qui possimus excepturi a maiores repellendus sit quibusdam sunt hic nesciunt illo. </li>
<li>Rem dolor tempora sed molestiae quae et quaerat voluptatem. </li>
<li>Ex reiciendis soluta quo iusto omnis aut laboriosam repudiandae et cumque unde. </li>
<li>Non porro aliquid aut nostrum optio. </li>
</ol>
<dl>
<dt><dfn>Et voluptatum sint qui nulla voluptas. </dfn></dt>
<dd>Id doloribus nemo est numquam doloremque. </dd>
<dt><dfn>In minus atque quo debitis numquam. </dfn></dt>
<dd>Non cumque sunt et sunt cumque ex commodi exercitationem! </dd>
<dt><dfn>Et tempora quis et sunt incidunt. </dfn></dt>
<dd>Eos voluptatem asperiores hic iure facere et odio officia? </dd>
<dt><dfn>Sit velit itaque. </dfn></dt>
<dd>Ea corrupti voluptate et dolore iure sed dignissimos accusamus. </dd>
</dl>
<h3>Eum ducimus labore vel doloribus nihil sed blanditiis repellat. </h3>
<p>Non exercitationem voluptatem <em>Nam nulla eum facere Quis ut magni quidem</em> rem facere incidunt. Delectus molestiae id quae ullam qui laboriosam itaque. Vel dolorem adipisci aut dicta assumenda quo enim voluptatibus non recusandae voluptatem. Et doloremque excepturi et minus suscipit est consequatur eveniet qui maiores natus. Et temporibus quam qui atque laborum qui quia voluptas qui iusto quis. At quia sunt ad quae autem aut odit dolores aut rerum quisquam vel repellendus expedita ad deserunt consequatur ut dolor odio. Qui labore odio et pariatur veniamsed animi. Ut dolorem corrupti et natus iure sed expedita tenetur et iure saepe et Quis soluta aut voluptatem officiis. </p>
<blockquote cite="https://www.loremipzum.com">Et modi modi eos voluptas doloribus non nisi culpa et esse eaque! </blockquote>
<pre><code><!-- Et sunt odit vel corporis reprehenderit. --><br><corrupti>Qui asperiores incidunt.</corrupti><br><sint>Non omnis commodi est tempora quia.</sint><br><hic>Aut omnis molestias nam doloribus numquam a voluptas consequatur.</hic><br><et>Et repudiandae error At aliquid modi.</et><br></code></pre>
<!-- End of Page Content -->
<form action="#">
<input type="text" id="search-term" />
<button type="submit" id="search-button" onclick="fSearch()">Search!</button>
</form>

JavaScript: get scrollY position of searched text on body [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I need scrollY position of searched text. How to find text in body and get scrollY position of the found text.
Following code is an example about question:
(all is clear)
<script>
function getScrollYPosition(var str){
/* step 1: search str in <body> and found.
* step 2: get scrollY position of found str.
* step 3: return position. (500)
*/
}
</script>
<body>
<p>Hello world</p> /*For example scrollY position is 500*/
<p>...</p>
<p>...</p>
</body>

You could first match the text string,
wrap it into an (span) element
and than calculate that element offset position
Here's a quick example
var word = 'dolor';
var rgx = new RegExp('\\b('+word+')\\b', 'ig');
// CREATE SPAN ELEMENTS WHAT WILL WRAP THE QUERY STRING (WORD)
$('div, div *').contents().filter(function() {
return this.nodeType === 3;
}).each(function() {
$(this).replaceWith($(this).text().replace(rgx, "<span class='match'>$1</span>"));
});
// COLLECT ALL SPAN POSITIONS
var positions = $('.match').map(function(){
return this.getBoundingClientRect().top;
}).get();
alert(positions);
div{font-size:50px;}
span.match{background: gold;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut voluptatum, provident saepe. Culpa animi sint, itaque iure error hic qui blanditiis perspiciatis adipisci, libero quia veritatis dignissimos quasi id cumque!</div>
<div>Magni cupiditate laudantium, corrupti commodi, reiciendis consequuntur recusandae minima tempore id placeat rerum saepe molestiae, nulla illo, dolores distinctio aliquid asperiores esse maxime voluptatibus corporis at. Commodi eius magni esse!</div>
<div>Maiores explicabo, dolor nemo mollitia cumque et nobis quae consectetur alias dicta quod facere saepe aspernatur sint ex soluta nulla veritatis ab. Sunt aspernatur distinctio quam alias quis possimus reiciendis impedit.</div>
<div>Est sequi eius nam, odio ut commodi quam omnis aperiam, vel, sunt quaerat adipisci voluptates natus possimus consequuntur corporis atque facere corrupti, rem autem modi ipsam inventore nobis! Itaque, modi?</div>
<div>Velit, cumque in dicta ratione iste autem, atque dolor magni optio, excepturi qui ipsam laboriosam modi quidem cupiditate sapiente perferendis! Iste eos fuga ut eum deserunt repellendus ex qui, illo eaque!</div>
<div>Ullam a, labore aperiam ex culpa nesciunt ipsam voluptatibus maiores consequatur qui repellendus obcaecati tenetur, consectetur eos, ut voluptate, nemo placeat soluta odit? Error, Dolor, voluptatibus! Id sed alias et consectetur.</div>
<div>Ipsa pariatur tenetur, nobis recusandae deserunt quisquam nesciunt, ex consequuntur minus voluptatem dolores officiis itaque fuga reiciendis dolor praesentium quae maxime repudiandae. Quibusdam sint fugit soluta pariatur, alias, eveniet natus culpa!</div>

You could be a little more specific with your answer. If I understand correctly you need to find an element that contains a given text and get its vertical offset. You could try the following:
$($(":contains(YOUR_TEXT)").slice(-1)[0]).offset().top

reserving space in browser layout for responsive images (preventing reflow)

I have been making changes to make my site more responsive and, in general, this has gone well. However, I have run into one problem:
Before, I always used height and width attributes on img elements in order to reserve space in the layout for the images while the browser loads them in. This prevents the layout from jerking around while the browser loads and calculates the needed space for the image.
After making my images more responsive, however, by using max-width: 100% and taking out the height and width attributes, the browser no longer reserves space for the image (because it no longer knows how tall or wide the image is going to be in advance since I couldn't explicitly tell it)
My goal is to have responsive images that also take up their appropriate space in the page layout upon its initial load. Does anyone know of a solution for this?
*EDIT (SOLUTION) - this is the best article I have found on the topic. Nice approach!

The correct answer here is to prevent the vertical reflow by using the "padding-bottom trick". To make this technique work, you must know the proportions of the image in advance.
Thanks to Anders M. Anderson for posting an excellent article on the topic: http://andmag.se/2012/10/responsive-images-how-to-prevent-reflow/

Here is a way to do it. It's not awesome, but works. http://jsfiddle.net/78Lvc/11/
I changed the image tag to look like this:
<img src="http://fitzgeraldmedia.net/images/range1.jpg" id="img" imgWidth="467" imgHeight="700" onload="fixMyWidth()"/>
You'll notice that I have added some attributes and an onload. You will have to add the attributes in code or by hand. The reason that you need the height and width is because you need to know the height of the image to calculate the space required in JS.
Then inline, I have this code:
<script>
//get the width of the browser right now
var containerWidth = document.body.offsetWidth;
//get the attributes that we have specified for this image
var imgWidth = document.getElementById("img").getAttribute("imgWidth");
var imgHeight = document.getElementById("img").getAttribute("imgHeight");
//since the img is to be 50% of the container width
var widthRatio = containerWidth / imgWidth / 2 ;
//now set the height of the image
document.getElementById("img").style.height = (imgHeight * widthRatio) + "px";
//once the image has actually loaded, run this
function fixMyWidth(){
//this will make it 'responsive' again
document.getElementById("img").style.height = "";
document.getElementById("img").style.width = "";
}
</script>

The question said:
by using max-width: 100% and taking out the height and width attributes, the browser no longer reserves space for the image ...
I think the questioner did not use the meta name="viewport" in his "html" codes. Here is the code of a html file that have an img tag with height and width attributes that is also responsive:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>img responsive</title>
<style>
.img {
display: block;
max-width: 100%;
margin: 0 auto;
height: auto;
}
</style>
</head>
<body>
<img src="https://hamid-davodi.com/img/images/portfolio-preview.png" id="myImg" width="1441" height="758" alt="My Image" class="img">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum ipsa enim, magni asperiores officiis adipisci! Alias vero at nostrum tempore facilis temporibus provident quae quo illo, error eligendi in, odit, ducimus? Harum incidunt enim blanditiis veritatis tenetur, quam provident quae. Nulla in incidunt libero atque nemo, pariatur dolore perspiciatis ut vero maiores praesentium iste fuga quis possimus repellendus a placeat, repudiandae officiis fugiat! Facere necessitatibus a aspernatur assumenda aliquam nisi et suscipit nemo reiciendis enim! Ipsa quos illo atque? Repellat iusto officia expedita harum odio consequatur sequi eos quas eum delectus molestias nulla ut impedit rem temporibus neque, provident. In alias, repellendus repellat culpa officiis accusamus enim perspiciatis non nihil omnis necessitatibus obcaecati provident unde odit ipsa impedit corporis, numquam, adipisci nisi porro, fugiat consectetur et aspernatur similique. Similique beatae vel deleniti voluptatum ratione pariatur nihil numquam dolores soluta tempora incidunt magni nobis ipsum non minus quo, necessitatibus modi temporibus saepe harum, iure iste animi fugit! Natus maxime aliquam qui. Esse nisi, rem. Vitae, illo, ratione. Fugit, nesciunt ratione modi minima itaque ipsum obcaecati magnam laboriosam amet quae suscipit optio reprehenderit aperiam dolore! Vel necessitatibus odit, molestiae ea perferendis dicta recusandae quibusdam maxime, natus autem voluptatum, iusto alias distinctio vero in sint, incidunt. Unde, esse nemo voluptatum ab est blanditiis expedita consectetur itaque repellat eveniet. Porro placeat harum, tenetur nam sed ipsa, est, maxime tempore obcaecati dolores possimus magni deleniti illum facere pariatur nostrum? Ipsa nemo officia ipsam pariatur neque sed suscipit ducimus dolores temporibus, aperiam perspiciatis soluta quibusdam sequi cum, illo totam labore hic nesciunt laborum odit. Eius rem saepe delectus necessitatibus eligendi, beatae officiis placeat quaerat illo! Laboriosam eaque, repudiandae consequatur repellat blanditiis recusandae adipisci amet iste aperiam alias magnam itaque dicta illum praesentium eum totam fugit atque ad ducimus soluta voluptatibus odio nostrum beatae dolorum? Assumenda tempore officia facilis fugit earum unde, illo ab dolorem nulla quos temporibus cumque rerum sed deserunt quaerat molestiae aut soluta, iste, doloremque distinctio! Id optio, dolorem perspiciatis, corporis distinctio eos enim perferendis. Cum sint placeat sequi cupiditate quas sunt saepe beatae aut molestias quod modi sit temporibus consequuntur ab repudiandae ut eius dolores aliquam iusto quibusdam ea dolore exercitationem, recusandae perferendis. Repellendus molestiae eum, iste, commodi explicabo officia adipisci enim cumque exercitationem minus veniam optio numquam, alias doloribus modi voluptates consequatur eius. Quia ut incidunt reprehenderit cupiditate repudiandae tempore nam dicta, quo iure exercitationem odio sapiente laboriosam non ducimus dolore quis labore dolores, odit eius quam nesciunt, voluptas a laudantium magnam veritatis. Reprehenderit magnam veniam, voluptatum facere a blanditiis, soluta cumque sint, corporis eligendi, neque quod. Nemo odio repudiandae non vel sapiente. Fugiat ipsum soluta consequatur, sunt nulla placeat quis, in quia a iure commodi est, maxime libero cum laborum magnam deserunt nihil. Obcaecati, rerum ducimus dolor esse expedita doloremque impedit voluptas blanditiis soluta officiis provident placeat, beatae, sint reiciendis. Aut ratione atque, tempore officia eligendi magnam obcaecati quis quia, soluta excepturi facere iure autem explicabo assumenda fuga a sequi suscipit! Praesentium, aspernatur nulla asperiores incidunt numquam eum eos dolor accusantium.
</p>
</body>
</html>
You can test it also in this codepen.

I wouldn't take height and width attributes out, just try setting them to auto.