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

Modify the contents of three div elements by incorporating JavaScript and ajax techniques

Currently working with rails 4 and JavaScript, I am faced with the following dilemma: I want to be able to alter the content of 3 specific divs on my page by clicking a single button. The values in these divs are being created by a Ruby function located in ...

javascriptjqueryruby-on-railsrubyajax

What is the best way to limit a user from inputting a year beyond 2018 into a textbox using

<label>Year</label> <asp:Textbox id="year" runat="server" placeholder="year"> Please make sure to only enter years up until 2018 in this textbox. Thank you. ...

jquery

Modify the hyperlink address in the body of the webpage using jQuery

I'm searching for a solution to modify the href attribute in the following code: <link rel="stylesheet" type="text/css" href="theme1.css"> For instance, changing it from: <link rel="stylesheet" type="text/css" href="theme1.css"> to: & ...

javascriptjquery

Increase division height when mouse hovers over it

I want the height of the div to be 50px by default and change to 300px onmouseover. I have implemented this as follows: <style type="text/css"> #div1{ height:50px; overflow:hidden; } #div1:hover{ height:300px; } </style> <body> <div i ...

javascriptjqueryhtmlcss

Using Jquery to create HTML elements from a C# function

I have a C# web service method that creates HTML code and returns it as a string. I want to take this HTML string from the method and replace a specific div element. function updateHTML(ID) { var gID = ID; $.ajax({ type: "get", co ...

c#jqueryajax

When would using <style> be more appropriate than using a css file?

Is it necessary to use the style element when you can simply write in the CSS file? Are there any circumstances where using 'style' is more beneficial than the CSS file? ...

htmlcss

The outline none property on the Material UI IconButton is malfunctioning

Attempting to style with CSS as shown in the following example: <CustomColorIconButton> <DeleteForeverIcon /> </CustomColorIconButton> const CustomColorIconButton = withStyles({ root: { color: "#ff8833", ...

cssreactjsmaterial-ui

Steps to access a Windows folder after clicking on a link within an HTML page using Asp.net

I attempted to use the following code : <a href="file:///C:\Programs\sort.mw">Link 1</a> <a href="file:///C:\Videos\lecture.mp4">Link 2</a> Unfortunately, this code does not work in Google Chrome or Firefox bro ...

htmlcssasp.net-mvc-4

Encountering issues with implementing useStyles in Material-UI components

Currently, I am working on a project utilizing Material-UI's library and encountering styling issues. This project marks my initial venture into ReactJS and JavaScript in general. Therefore, any assistance would be greatly appreciated! I am struggli ...

cssreactjsmaterial-ui

leaflet geodesic - the extended dataset remains hidden from view

Currently relying on the following code: $.ajax({ type: "GET", url: "/geojson/routes", dataType: 'json', async: true, success: function(latlngs) { var Geodesic = L.geodesic([latlngs], { weight: 3, opacity: 1, color ...

jqueryjsonajaxleaflet

Tips for minimizing the size of this script

I am new to using Jquery and Javascript, but I have managed to create a script that communicates with a php controller in symfony2. My query is, how can I shorten the script length? Is there a more efficient way to solve the logic instead of using the swi ...

javascriptjquery

What is the process for integrating jQuery into a Node project following installation via npm?

After using npm to install jquery (npm install jquery --save), the library was added to my node_modules folder. Now I am unsure of the correct path to use in the script tag on my html page. My directory structure is as follows: -Project Root -node_modu ...

jquerynode.jsnpm

A helpful tip on how to designate a specific color to the helperText in Material UI in order to emphasize

Is there a way to customize the color of helperText in material-UI for highlighting errors in a TextField? I've been struggling to change the color of helperText with no success. I attempted using MuiFormHelperText-root-406 to add CSS styles, but it ...

cssreactjsmaterial-ui

Event delay with JavaScript and jQuery

In my WordPress (WooCommerce) website, I am working on creating a quantity field... It is functioning properly; however, I want to trigger an event when the + or - buttons next to Quantity are pressed in order to "Update cart". This is what I have tried: ...

javascriptjquery

wordpress widget that triggers a function when a click event occurs on jquery

I'm facing an issue where this function works perfectly in my header, but seems to have no effect when used in a widget $("#myID").click(function(){ var name = $("#name").val(); var phone = $("#phone").val(); console.log(name +" "+ phone) ...

javascriptphpjqueryajaxwordpress

Prevent the Rain from descending

Looking for a way to toggle a particle emitter on or off, I've encountered memory leaks with my Reactjs code that generates rain/snow particles using the canvas element. Despite attempts to stop the animation properly, it seems to be projecting a new ...

javascriptjqueryreactjscanvas

Skewed top-left border surrounds the element with a dashed design

I'm looking to achieve a border effect similar to the one shown in the image linked below: https://i.sstatic.net/a4hCQ.jpg Here is the code I have tried so far: <p>Some Text</p> p{ -webkit-transform: perspective(158px) rotateX(338deg ...

htmlcssbordercss-shapes

Tips on eliminating the top margin on my webpage

I am in need of assistance with removing the margin at the top of my page. Take a look at the screenshot for reference: As shown in the image, there is a red arrow pointing to the problematic margin. Can someone guide me on how to eliminate this margin? B ...

htmlcssmargin

Using JSP to send variables from an external Javascript file

After creating a timer function, I am looking to display the results on a different page. The setup involves a JSP file calling functions from a separate JS file in order to output the information to another screen: Instructions in the JSP file: <butt ...

javascriptjqueryjsp

Using JavaScript to redirect browser with a specific string

My goal is to redirect all users who visit a specific URL to another page. While this redirection works effectively, I now need to implement it with a tracking URL. The issue arises when Javascript automatically adds a "/" in front of the tracking string ...

javascriptjqueryhttp-redirect