0

I hava a page with two columns. I would like to textarea height mimic left column height. Left column is short when webpage loads, but when user starts expanding various properties (checkboxes + dropdownmenus) it grows based on hidden divs. But my textarea is still small in right column and making it staticly bigger does not look good. I want it to grow per left column height. Not sure how to achieve that.

EDIT: Once height: 100%; was added to textarea it solved the issue with columns growth. But I ran into another two issues.

  1. Textarea in right column overlaps that column on page load. When I try to resize, it suddenly jumps to the column properly. Weird behavior. here is the pic - textarea overlaps column
  2. Left column context is not aligned properly with right. How I am going to align or justify context of both columns so they end up like this: here is the pic - final look

My CSS:

body { height: 100%; position: relative; background: #000000; color: #66adff; font-size: 105%; font-family: serif, Arial, Helvetica } .column { border: 5px solid #333; } .container{ display: flex; } .columnleft { width: 45%; padding: 10px; display: table-cell; } .columnright { width: 45%; padding: 10px; display: table-cell; } textarea.out {width: 100%; height: 100%; box-sizing: border-box;}

EDIT 2: Issue 1 - I had text inside the column which pushed area down Issue 2 - all was fixed with proper padding

Thanks all for replies.

Improve this question
4
  • As far as I can tell, if your function isn't working out for you it's because you're using document.getElementById('columnLeft'), but you have columnLeft defined as a class rather than an id. You would want to use document.querySelector('.columnLeft') and document.querySelector('.columnRight') to get the first instance of these classes on your page in order to change their style. Or if you want all instances of these classes as arrays use document.querySelectorAll('.columnLeft') and document.querySelectorAll('.columnRight'). From there you can loop through each element and manipulate them. Commented Jan 20, 2021 at 19:25
  • 2
    basically one of the main advantages of using flex is that we don't need this js code at all to have equal hight elements in one row, could you please share more from your HTML code, or create a reproducible example Commented Jan 20, 2021 at 19:30
  • 1
    why use float if you apply flex? Why not using css-grid that can do this without scripting? Commented Jan 20, 2021 at 19:31
  • You don't need JS. See here: w3schools.com/howto/howto_css_equal_height.asp Commented Jan 20, 2021 at 19:50

4 Answers 4

Reset to default
1

I think you could do this without js, but use CSS Grid instead.

Example:

.grid-container { display: grid; grid-template-columns: 1fr 1fr; // the width of each column grid-template-rows: auto; // row height will auto-adjust to contents }
<div class="grid-container"> <div class="column-left"> ...some dynamic content gets bigger and bigger and bigger and bigger and bigger </div> <div class="column-right"> might be empty or small or large </div> </div>

The grid row height will always adjust to the height of the largest content which will make both columns the same height.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

you have a technical mistake. 50% 50% will nearly always overflow. It will overflow as soon as a padding or grid-gap is in use. 50% means 50% of the parents width not automatically countin in paddings, borders or grid-gap. The right value should be 1fr 1fr. Also you dont need to add grid-template-rows which will could cause issues if you have more then 1 row. It should be grid-auto-rows. Technically you dont need to add it, as it is the default property and value.
Thanks for the note! I changed the column size - good point! I left the rows only because it's an example and should work if there are only two child elements in the grid-container. But I appreciate the helpful info!
0

Since you're using flex, the right column should be automatically adjusting to match the left column. It sounds like your issue is that the textarea is not expanding automatically to match its container (right column.)

If that's the case, try this simple fix - in your CSS, set textarea height to 100% to automatically fill its parent:

textarea { height: 100%; };

Here's an example answer: Textarea to fill a parent container exactly, with padding

Improve this answer

2 Comments

Hi and Welcome to SO. Please use the anwser option if you have a definite solution. For that include a working code snippet (ctrl + m) to verify that your solution works. Add enough explaination of your solution so it can be reproduced. Also do not just add links to other solutions. If those links changes or the content, then your anwser would be worthless to SO in the future.
Sorry about that. I actually wanted to comment to clarify if OP had the textarea expanding issue instead of the column expanding issue that other answers were focusing on, but unfortunately I don't have enough reputation to comment. So I submitted an answer instead to point OP towards the textarea height 100% fix.
0

The reason your code wasn't working was because you didn't set the height to your textarea settting the height to 100% will always make it fit the maximum size of it's container (<div>) also i have added box-sizing: border-box; so that you can add padding to your columnright.

A better explanation about box-sizing can be found here (just won't explain here because i couldn't do better then this): https://css-tricks.com/box-sizing/

function f_anyEvent(){ var leftcolumnHeight = document.getElementById('columnleft').style.height.value; if (document.getElementById('columnleft').style.height != document.getElementById('columnright').style.height) document.getElementById('columnright').style.height = leftcolumnHeight.value; } document.getElementById('add').addEventListener('click', function() { let columnleft = document.getElementById('columnleft'); columnleft.innerHTML += '<h1>a</h1>'; });
.row{ display: flex; } .column { border: 1px solid #333; } .columnleft { float: left; width: 45%; padding: 10px; display: table-cell; } .columnright { float: left; width: 45%; padding: 10px; display: table-cell; } textarea { width: 100%; height: 100%; box-sizing: border-box; }
<div class="row"> <div id="columnleft" class="column columnleft"> </div> <div id="columnright" class="column columnright"> <textarea></textarea> </div> </div> <button id="add"> add </button>

Every time you click add it will add an <h1> to your left column and your textarea will get the same height as columnleft.

Improve this answer

4 Comments

An anwser should always contain enough explaination to be understood and being reproducable. A try this + code is insufficient and can be considered low quality. Add enough explanation of what you did to solve the issue and how the OP can reproduce the solution. In that case I will revoke my downvote.
Just updated my answer, i though i had give an explanation at the end, my bad.
adding height helped but now I am facing different evils.
You must be clear, we can't you help without details. You can create a jsfiddle so that we can see the error and/or update/create a new question.
0

Here's a basic demo of an interface similar to yours that uses display: grid on the parent container to automagically keep the two inner divs the same height. (Click on the blue details element to trigger a height change.)

It's wonderfully simple. (Thanks for inspiring me to finally learn how grid works.)

// The JavaScript isn't needed for the dynamic styling. (It just copies the text.) const left = document.getElementById("left"), right = document.getElementById("right"); left.addEventListener("change", showOutput); function showOutput(event){ right.innerHTML = this.querySelector("#reasons").value }
div { max-width: 400px; border: 1px solid grey; } details{ margin: 10px 5px; color: #0000DD; text-decoration: underline; } /* This is where the magic happens */ #container { display: grid; grid-template-columns: 1fr 1fr; } #left{ padding: 10px; } #right { white-space: pre-wrap; }
<div id="container"> <div id="left"> <label> <input type="checkbox"/> I like pie </label> <details> <summary>Type your reasons here</summary> <textarea id="reasons"></textarea> </details> </div> <div id="right"></div> </div>

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.