Ways to maximize the height of <textarea> to fill the remaining space

I have been working on a project to create a chat window. Although most of it is coming together, I am having trouble getting the 'conversation' textarea to expand vertically and fill the remaining space in the window.

Below is the full code for my page (the textarea I need to adjust is inside the div id="conversation"):

<html>

<head>
<meta charset="utf-8"> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css">

<title>
chat prototype
</title>
</head>

<body>
<div id="completeSite" style="display: flex; flex-flow:row wrap" >

<div id="taskBar" class="col-md-12" style="border-style: solid; ">
TASKBAR
</div>
<div id="userList" class="col-md-2" style="border-style: solid;">
USERLIST
</div>

<div id="chatWindow" class="col-md-10" style="border-style:solid;">

<div id="conversation" class="row">
<textarea readonly class="form-control"  style="overflow:auto; resize:none; border-style: solid;">CONVERSATION</textarea>
</div>

<div id="MessageInput" class="input-group row">
<textarea class="form-control" id="message" placeholder="Message" style="height: 200px; overflow:auto; resize:none;"></textarea>

<span class="input-group-btn">
        <button class="btn" id="submitMessageButton" type="button" style="height: 200px; background-color:  #999999">Send</button>
</span>

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.js"></script>
</body>

</html>

All custom CSS styles are applied directly in the elements using style=.

I have attempted some solutions:

  1. Defined a relative height:, however this caused issues when the window was minimized as it adjusted based on screen size rather than window size.

  2. Tried using the flex approach by applying 

    display:flex; flex-direction:column
    on the div id=conversation and flex: 1 on the textarea within div id=chatWindow, but saw no results. Found this solution on Stack Overflow and gave it a shot.

htmlcssheighttextareabootstrap-4

Answer №1

After reviewing the response from "user123," I found that although mostly accurate, there were issues with browser compatibility due to the use of $(window).innerHeight();. According to w3schools, this function returns "the inner height of a window's content area."

After some troubleshooting, I discovered that this method only worked in Edge and IE11. To ensure compatibility across all browsers, including Edge, IE11, Firefox, and Chrome, I had to switch to using $(window).outerHeight();, which is defined as "the outer height of a window, including toolbars/scrollbars" on w3schools.

In essence, while it may not make much logical sense, opting for outerHeight() over innerHeight() allowed me to successfully implement the desired functionality.

Just posted this as an answer to draw attention to the issue.

Answer №2

Make your chat box height match the height of your browser window by replacing "#myDiv" with your own code id or class name.

$(document).ready(function() {
  function setHeight() {
    windowHeight = $(window).outerHeight();
    $('#myDiv').css('min-height', windowHeight);
  };
  setHeight();

  $(window).resize(function() {
    setHeight();
  });
});

To learn more, check out this link:ViewPort

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

How can I showcase both a username and email address in a Material UI chip?

I'm currently using Material UI chip to show name and email next to each other. However, when the name is long, the email goes beyond the chip boundary. Here's my function that generates the chips: getGuestList() { let {guests} = this.sta ...

htmlcssreactjsmaterial-ui

Generating a dynamic triangle within a div while ensuring it fits perfectly with the maximum width

I need help with creating a responsive triangle on a web page that takes three inputs. The challenge is to adjust the size of the triangle so it fits inside a div element while maintaining the aspect ratio of the inputs. For instance, if the inputs are 500 ...

javascriptjquerycssresponsive-designgeometry

Mobile-formatted inline Bootstrap

Using bootstrap and seeking to have elm1, elm2, and elm3 displayed inline on mobile devices? Take a look at the code snippet below: <div class="container-fluid"> <div class="form-group"> <label class="control-label col-sm ...

csstwitter-bootstrapresponsive-design

Utilizing the overflow feature in conjunction with a specified height

Take a look at this image, the overflow:hidden property is not working as expected and some text is still visible that I want to hide without adjusting the height. How can I achieve this? Focusing on the highlighted area in Red, it is causing irritation. ...

htmlcssoverflow

Is it possible to modify the class attribute of an HTML element in PHP upon clicking an input?

In this assignment, I am restricted to using only PHP and cannot incorporate JavaScript. Currently, my code is set up to detect a post from an input type="submit" and then check for empty or filled text inputs. The code currently echoes text based on the c ...

phphtml

Having trouble getting Tailwind CSS to work with React components?

I'm having trouble getting Tailwind CSS to work properly. I've made sure to update to the latest version, but for some reason Tailwind is not functioning and there are no errors showing up in the console. Here is a link to my header component an ...

htmlreactjstailwind-css

Apply the `text-overflow: ellipsis` property to truncate the text of two items within a flex column, which is contained within

I am attempting to accomplish the following: https://i.sstatic.net/H0pB0.jpg Successfully implementing ellipsis for a single item is achieved with: white-space: nowrap; overflow: hidden; text-overflow: ellipsis; However, my challenge lies in truncating ...

css

Can this be achieved using CSS alone, without needing JavaScript?

In this scenario, there is a div with the class of some-class that can have either one or two child div elements. When there is only one child div, I want it to have a width of 100%. However, if there are two child div elements present, I want them to have ...

htmlcss

Variety of typefaces for diverse placeholder values

I have successfully changed the font-family of both input and textarea elements in HTML. However, my question is whether it's possible for two textarea fields to have different fonts applied to them individually. If so, I would appreciate some guidanc ...

htmlcss

Using VueJS transitions may require the use of setTimeout for them to work

My code successfully slides out a menu: Vue.set(this.filterStyles, filterIndex, { display: "block", height: "auto", }); let filterValuesElHeight; Vue.nextTick().then(() => { let filterValuesEl = document ...

javascriptcssvue.jscss-transitions

Concealing two div elements based on string content

I am working on a unique Wordpress blog post layout that showcases personnel profile cards, displaying 12 individuals at a time. Depending on whether or not a person has a Twitter handle entered in the backend, certain elements should either be shown or hi ...

javascripthtml

jQuery Function malfunctioning after initial click

I have developed a function that plays and pauses music. It is designed to be simple and lightweight for small audio samples, with basic play and stop functionalities. The issue I'm encountering is that after playing the music for the second time, the ...

jqueryhtmlcss

Navigating Bootstrap 4 forms with ease, ensuring accessibility for all users, and

I am currently working on constructing a bootstrap 4 form utilizing the grid system. Due to my significant eyesight limitations, aesthetics are not my primary focus. I am open to any and all suggestions to improve this form. My desired specifications for ...

bootstrap-4

Having trouble getting the bootstrap navigation toggler to function properly

I've been trying to implement the following code using Bootstrap, but I'm running into an issue where clicking on the toggler does not display anything. The button registers when I hover and click on it, but no content is shown. I followed the ex ...

htmltwitter-bootstrapbootstrap-4bootstrap-5

What size should I use for creating a responsive website?

After scouring the internet, I stumbled upon numerous dimensions referred to as proper for developing responsive designs. However, I am specifically interested in identifying the ideal breakpoints, particularly for mobile devices with small screens like ...

htmlcssresponsive

Implementing Background Video in Bootstrap 5 for a Stunning Hero Section

I have a unique template design that I am working on: https://i.sstatic.net/lLleK.png My goal is to replace the current background image with a video. Here is my attempt by adding a <video> tag: <!-- ======= Hero Section ======= --> <sec ...

htmlcsstwitter-bootstrapbackgroundbootstrap-5

The alignment of links is not meeting the centering requirement

I'm facing a challenge with aligning my "buttons" on the pages, although they are essentially text links designed to resemble buttons using CSS. These buttons are utilized within an unordered list structure (refer to the HTML snippet below). The rele ...

htmlcssresponsive-design

Three fluid columns in a CSS flexible container

I need help with creating a fluid div container: width: 97%; min-height: 80px; -webkit-box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.45); -moz-box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.45); box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.45); background: white; margin ...

htmlcss

Can the outcomes be showcased again upon revisiting a page?

Whenever I navigate away from and return to my filter table/search page, the results vanish. I'm looking for a way to preserve the results without reloading the page. Essentially, I want the page to remain as it was originally, with the search results ...

javascripthtmljquerycss

Submitting Forms Using Jquery Lightbox Technology

I've encountered a problem with a form that allows users to enter information and submit it to a PHP script for database storage. However, not all of the data is being sent. Here is the code snippet: $(document).on("click", ".save_new_user", functio ...

jqueryhtmlajax