Ways to update border when div height expands

Within a div, there is a textarea that grows in size as the user types. The div itself has a border of 1px solid black. However, when the textarea expands, the outer div also increases in height, but the border does not adjust accordingly. How can this be resolved?

The following code is used for this functionality:

$('#sendtext').on('input', function(){
        $this = $(this);
        var totalHeight = $this.prop('scrollHeight') - parseInt($this.css('padding-top')) - parseInt($this.css('padding-bottom'));
        $this.height(totalHeight);
        $div = $('#sendmsg');
        $div.height($div.prop('scrollHeight') - parseInt($div.css('padding-top')) - parseInt($div.css('padding-bottom'))
    });

Even though the outer div's height changes are visible in Chrome developer tools, the border remains unaffected. See image here.

HTML -

<div id="sendmsg">
                                    <textarea id="sendtext" value="">
                                    </textarea>
                                    <div class="clearBoth"></div>
                                </div>

CSS -

#sendmsg{width:100%; height:auto;}
#sendtext{width:95%; margin:10px; padding:5px; transition: width 0.25s; resize:none; overflow:hidden;}
.clearBoth{clear:both;}
jqueryhtmlcss

Answer №1

Hey there, I've put together a JSFiddle for you which can be accessed through this link. I hope this proves to be useful.

Here's the breakdown:

<div>
    <textarea id='grow'></textarea>
</div>

CSS Style:

div {
   width: 400px;
   border:solid 1px #333;
   padding:10px;
}
textarea {
   overflow: hidden;
   min-height: 50px;
   max-height: 100px;
}

Javascript/jQuery Function:

$(document).ready(function(){
   $('#grow').keyup(function(e) {
      $(this).css('height','5px');
      var dynamicHeight = document.getElementById('grow').scrollHeight+'px';
      $(this).css('height', dynamicHeight);
   });
});

Answer №2

Take a look at this for potential assistance:

Here is the HTML code snippet:

<div>
    <textarea></textarea>
</div>

And here is the corresponding CSS code snippet:

div{
    height: 200px;
    width: 300px;

}
textarea{
    height: 100px;
    width: 100%;
    box-sizing:border-box 
}

You can also view the jsfiddle link for further reference.

Answer №3

$('#sendtext').on('input', function() {
  $this = $(this);
  var totalHeight = $this.prop('scrollHeight') - parseInt($this.css('padding-top')) - parseInt($this.css('padding-bottom'));
  $this.height(totalHeight);
  $div = $('#sendmsg');
  $div.height($div.prop('scrollHeight') - parseInt($div.css('padding-top')) - parseInt($div.css('padding-bottom'))
});
#sendmsg {

  width: 100%;

  height: auto;

  border: 1px solid #000;

}

#sendtext {

  width: 95%;

  margin: 10px;

  padding: 5px;

  transition: width 0.25s;

  resize: none;

  overflow: hidden;

}

.clearBoth {

  clear: both;

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="sendmsg">
  <textarea id="sendtext" value="">
  </textarea>
  <div class="clearBoth"></div>
</div>

I have posted your code here, but I don't notice any problems. It seems to be working perfectly fine.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Neglecting to pass data to the controller through the onclick function

Using this specific button element in my JavaScript implementation has raised some concerns. <button id="bid" type="button" class="button" onclick="connect()">Save</button> While I have noticed that it displays an alert message when 'ale ...

javascriptjqueryajaxcodeigniter

Carousel Image Alignment Issue on iPhone SE Portrait Mode: All Images Centered Except One

Check out this website: It functions perfectly on Desktop browsers at all scales and works on Mobile devices in Landscape mode. However, I noticed that when using Portrait mode on my iPhone SE, the first image in the carousel appears off center in Chrome ...

jqueryhtmlcssiphonetwitter-bootstrap

What is the most efficient method for embedding a YouTube video into a <video> tag using React?

I tried embedding a YouTube video using an HTML5 tag, but encountered an error <div className={classes.VideoContainer}> <video className={classes.movieInfo__trailer} src="https://www.youtube.com/watch?v=V3hy2aLQFrI" ...

htmlreactjs

Put a spinner within a JavaScript function

Implementing a spinner using JavaScript function. Hello everyone, I am new to JavaScript and I am struggling to include a spinner in my code. Below is the code that I wrote. Can anyone help me identify what the issue might be? document.getElementById(&apo ...

javascriptjqueryajaxspinnersql-insert

"Create dynamic web pages with multilingual support using HTML, JQuery, and nested

For my multilingual website, I wrote this simple JQuery code: (function() { var language, translate; translate = function(jsdata) { $('[tkey]').each(function(index) { var strTr; strTr = jsdata[$(this).attr('tkey')] ...

jqueryhtmljsonmultilingual

Will using lengthy CSS custom property names impact the performance of a website?

I've been contemplating experimenting with projects that aim to shorten CSS variables in order to decrease the size of my CSS file. How do long CSS custom property names impact page performance? Reduction in CSS file size (including compression) Imp ...

cssperformancecss-variables

Modifying data in Django models upon selection of a choice field

Asking for people's hobbies on a form used to be a Charfield until I decided to upgrade it to multiple choices. Now, I want to update the old data values for hobbies - for instance, if someone entered "football", "skiing", it should be changed to &apo ...

pythonjquerydjangodatabaseforms

Strategies for smoothly navigating the page to a specific div every time

Currently, I am working on a form that requires submitting multiple child forms. To enhance user experience, I have incorporated jQuery functionality to display a message at the top of the page upon each submission. Now, my goal is to implement a feature w ...

javascriptjqueryhtmlcss

"Troubleshooting: Sub-routes in AngularJS not displaying when directly typing in the

My AngularJS setup is configured to use HTML5 routes and it functions perfectly on urls like website.com/foo. However, I am facing an issue when creating routes for subpages, such as website.com/foo/bar. In this case, the correct page only appears when c ...

javascripthtmlangularjs

If padding is included, the width of an element will be affected when using rem

I am facing an issue in my project. Whenever I try to insert a custom font-size at the html level, the red badges get deformed when there is padding (p-6) on the first line of code. Can someone assist me with this problem? I am using Tailwind CSS, but even ...

htmlcsstailwind-css

Bootstrap container with added page border

Allow me to explain the issue to the best of my ability: I have a design that needs to be implemented using bootstrap. I prefer to use only CSS and avoid JS/jquery. The content is contained within a bootstrap container that has two columns. The left gre ...

htmlcssbootstrap-5

Creating iterative headings in R Quarto HTML

I'm in the process of creating an innovative Quarto HTML document. My goal is to generate dynamic headings within the HTML code. I have managed to achieve the following successfully: {r} #| output: asis star_wars_data = data(starwars) TESTING <- ...

htmlrquarto

Trouble getting proper alignment displayed with JavaScript and CSS

If anyone has a solution for printing content in a div using JavaScript and CSS, please help. The main div with the id 'preview' contains content taken from a database using PHP and MySQL. However, the data on the print page appears vertically an ...

javascriptphpcss

It is not possible for me to restore a previously deleted element from the table

<table class="files-table table"> <thead> <th>Filename</th> <th>Type</th> <th>Status</th> <th oncli ...

javascripthtmlcss

Is it possible to operate a mobile site automatically alongside a desktop site?

I'm currently working on a website that looks fantastic on desktop, but doesn't quite function properly when viewed on mobile devices. I'm curious if there is a method or system I could implement to automatically load the mobile version of t ...

htmlcssresponsive-design

Obtain the URL currently loaded in the browser, excluding any URLs retrieved using jQuery's $.get function

I am working with a controller named examples.php, which contains the following function: public function total_records_of_current_dataset(){ $url = base_url().uri_string(); $get_current_segment = $this->uri->segment(3); $count_all_rows ...

phpjquerycodeigniter

Challenges arise when IE distorts featured images in a Wordpress theme

I've set up a Wordpress theme that utilizes featured images as header images on pages to allow clients to easily make modifications themselves. The header image container needs to be a fixed size (100% width of the page and 300px height), so I'm ...

csswordpressinternet-explorer

Guide to redirecting a page after submitting a form

I have two HTML forms, one visible and one hidden, that I need to submit to the background using a jQuery script. After submitting the hidden form, I want to redirect my page to http://www.youtube.com/. Can you provide code to add the redirect functionalit ...

jquery

Aligning text and checkboxes for perfection

Looking for a solution to align text and checkbox without using a blank image; I have the following HTML code: <span><b>System Type</b></span> <img src="~/Content/images/blank_img.png" alt=" ...

htmlcss

How can ReactJS conceal text when it wraps to the next line?

I am currently developing a web application that is compatible with both small and large screens. I am facing an issue where when the browser window is resized to be smaller, a title such as "Stackoverflow helps a lot" ends up breaking into the next line. ...

javascripthtmlcssreactjs