Text area with a set height and expandable max-height - scrollable overflow

http://codepen.io/africanmatt/pen/IcGpa

.text {
  max-height: 0;
  overflow-y: auto;
  transition: all .45s ease-in-out;
}

.text-active {
  max-height: 50%;
}

I am looking for a way to resize the .text component's max-height so that it adjusts proportionally with the height of the right-hand column when the window is resized. This is in order to keep both columns at an even height. While I think JavaScript could potentially solve this issue by adjusting max-height based on window width and height, I'm wondering if there might be a simpler CSS solution available.

jquerycssheightflexbox

Answer №1

Give this a shot...

When the window is resized, the following code will set the maximum height of elements with the class 'text' to 100 pixels:
window.onresize = function(){
    $('.text').css('max-height', 100);
}

Answer №2

To adjust the height of the text field dynamically, JavaScript may be required. The method used to determine the appropriate height will vary based on how the field is positioned in relation to adjacent elements on the right side.

Currently, the fluctuating sizes of the boxes above and below the text field cause it to move up and down, making alignment with the right side challenging. Will the left side also exhibit similar behavior in the final design? Consider placing the text field in a more fixed location and then using JS to explore different max-height values for optimal results.

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

Dynamic sidebar that adheres to the content and is placed alongside it using JavaScript

I am in need of creating a sticky sidebar that will float beside my content column. The purpose of this sidebar is to contain jump links on the page, similar to what can be seen on this page, but with the navigation buttons positioned directly next to the ...

javascriptjquerycss

Insert comments into MySQL database using asynchronous JavaScript and JSON technology

Looking at the diagram, I have a scenario where two tables exist in my MySQL database and the goal is to enable the system to add and retrieve comments without the need to refresh the page. This functionality involves three PHP pages: 'DB.php', ...

phpjquerymysqlajaxjson

Retrieving CSS file using admin-ajax.php in WordPress

The website has been tested on GTmetrix and you can view the report here I am puzzled as to why admin-ajax.php is causing a delay of over 3 seconds in loading time on this particular page that I am attempting to optimize. It seems to be related to a CSS ...

phpcssajaxwordpressadmin-ajax

Cease the continuous reloading of the website during the

Hi there! I have come across a little script that runs when the user clicks on "submit": $(document).ready(function(){ $("form").submit(function(){ var username = $("#username-field").val(); if(username) { $.ajax({ url: &ap ...

jqueryajaxpluginsreturnalert

What is the best way to convert this JavaScript iteration function into jQuery?

I recently encountered an issue with my JavaScript function that returns a list of elements with the class ".youtube", loops through them, and calls another function. The JavaScript logic is flawless, but I wanted to convert it into jQuery for better reada ...

javascriptjqueryhtmlcss

Chrome and Firefox: Images cling together

I've encountered an issue with my recently launched website. Some images in a grid appear to be stuck together, but this problem only occurs in Firefox and Chrome browsers. Oddly enough, zooming in to around 110% then back to 100% seems to temporarily ...

javascriptcsswordpressgoogle-chromefirefox

Is there a way to automatically create distinct DOM ids every time?

As I delve into coding with JS and the DOM, I frequently encounter the need to create ids (or names) solely for the purpose of grouping DOM elements together (or associating them with each other)1. These ids (or names) are not referenced anywhere else in ...

javascriptjquerydom

"Implementing jquery autocomplete feature with the ability to fetch data from

Currently, I am utilizing jquery's ajax functionality to retrieve data from an external php file. The retrieved data is then intended for use in the autocomplete feature. However, instead of displaying individual values from the array in the php file ...

phpjqueryjquery-autocomplete

Pass an array using AJAX to my Python function within a Django framework

I am attempting to pass an array to my python function within views.py, but I am encountering issues. It consistently crashes with a keyError because it does not recognize the data from js. Code: Python function in views.py: def cargar_datos_csv(request ...

javascriptpythonjquerydjangoajax

Adding individual buttons at the bottom of each data row using Jquery: A step-by-step guide

Currently, I am receiving data from a backend using an AJAX GET method and displaying it in a list in HTML. However, I am facing some issues with including buttons within the list and making them functional by utilizing delegate and other methods. I would ...

javascriptjquery

Tips for resolving the issue with "Text Animation"

Could someone please help with fixing this CSS animation? I want to align the text animation to the paragraph properly. I'm not confident if I am approaching this in the correct way, so if there is a simpler solution out there, I would appreciate lea ...

htmlcsstextcss-animations

Explain the inner workings of the setTimeout() function in JavaScript

My goal is to create a line in my code by placing points according to the line equation and adding a 100 millisecond delay before each point is displayed. However, when I try to run the code, it seems to wait for some time and then displays all the points ...

javascripthtmlcsssettimeout

I am looking to ensure that the ul li a() elements remain hidden until I hover over the h2 tag, at which point they will be displayed

Insert your code here : <table cellpadding="0" cellspacing="0" align="center" class="TblGreen"> <tr> <td> <h2><a href="#" class="AGreen">Sweater</a></h2> <p>The coding business</p> ...

htmlcss

Troubleshooting PHP Errors Following an Ajax Response in CodeIgniter Framework

I am currently developing a unique ecommerce website. To experience the issue I'm facing firsthand, you can visit the link below. take a look at my custom ecommerce site » (username: alex, password: superman) The problem I'm encountering is t ...

phpjqueryajaxxcodee-commerce

Font rendering issue in Chrome extension

I have been diligently following various tutorials on incorporating a webfont into my Chrome extension, but unfortunately, none of them seem to be working for me. Despite all my efforts, the font remains unchanged and still appears as the default ugly font ...

javascriptcssgoogle-chrome-extensionfonts

Having a newline between HTML elements can disrupt the structure of an HTML layout

It's common knowledge that in html, a newline between elements is treated as space. However, I find it quite alarming when working on responsive layouts. For instance, take a look at this example where the expected and correct behavior is achieved on ...

htmlcssnewlinespace

Passing a variable to the render method in a PDF document

I'm currently working on a project with Django where I need to convert an HTML monthly report into a PDF. The data for the report is retrieved from a database based on the selected month. I am facing an issue in sending the selected month from the HTM ...

htmlcssdjangoclasspdf

WCF API encountering issue with Ajax request

I encountered the following error: The exception message is 'The incoming message has an unexpected message format 'Raw'. The expected message formats for the operation are 'Xml', 'Json'. This can be because a WebC ...

c#jqueryasp.netajaxwcf

Dynamic updating of scores using Ajax from user input

My goal is to design a form that includes three "Likert Scale" input fields. Each of these three inputs will have a total of 10 points that can be distributed among them. The submit button should become enabled when the score reaches 0, allowing users to s ...

javascriptjqueryhtmlcssajax

creating dynamic parameterized URLs in Laravel

For example: Here are a few names. - Mujib - Amjed - Anees When someone clicks on "Mujib," the URL should remain the same and only the parameter should change. When someone clicks on "Amjed," the URL parameter should change to . ...

javascriptphpjqueryajaxlaravel