One text area adjacent to multiple smaller text areas?

Question

I need to arrange two groups of text in adjacent columns. On the left I want a textarea that spanning the total height of the text. To its right I want at least three text areas that break the text on the left into smaller chunks. I don't have any trouble taking the full text and breaking it into small chunks. My question is about how to arrange the html/javascript/css. I tried a table structure for ease of putting the text side by side. Any suggestions welcome. Bonus for code that allows the textareas to resize after editing.

Here is some additional information: The text area needs to be arbitrary. The user will paste at least 3-4 paragraphs worth of text into the left text box. I'd want the left text box to size itself to show all the text while right side text boxes size themselves as the user makes edits. But I don't know beforehand how large the leftmost textarea will need to be.

Here is my initial attempt (I hope the fiddle work): http://jsfiddle.net/jank0003/uape4twk/

Here is the HTML:

<table>
    <tr>
        <th>RightCol</th>
        <th>LeftCol</th>
    </tr>
    <tr>
        <td><textarea id="initialText">Initial Text</textarea></td>
        <td><textarea id="interText1">Intermediate Text 1</textarea></td>
    </tr>
    <tr>
        <td></td>
        <td><textarea id="interText2">Intermediate Text 2</textarea></td>
    </tr>
    <tr>
        <td></td>
        <td><textarea id="interText3">Intermediate Text 3</textarea></td>
    </tr>

</table>

*"On the left I want a textarea that spanning the total height of the text."* What text? — T.J. Crowder, Dec 30 '14 at 19:02
The text area needs to be arbitrary. The user will paste at least 3-4 paragraphs worth of text into the left text box. I'd want the left text box to size itself to show all the text while right side text boxes size themselves as the user makes edits. — Matthew David Jankowski, Dec 30 '14 at 20:20

indubitablee · Accepted Answer · 2014-12-30T21:33:30.820

http://jsfiddle.net/uape4twk/5/ Is this what you're looking for?

EDIT:

So I'm gonna scrap all the code above, because you're looking for something different than what I originally coded. I think this is closer to what you want: http://jsfiddle.net/swm53ran/8/

I used bootstrap grid system (responsive) and a separate js plugin elastic that changes the size of the textarea on teh left. And you said above that you figured out how to separate the text into three sections, so once that is done, the size of the three textareas on the right should be similar to the size on the left. i just set the initial size of the left textarea for looks once you hit the view.

<div class="col-md-12">
    <div class="row">
        <div class="col-xs-4">
            <textarea class="form-control" rows=7>This is some text</textarea>
        </div>
        <div class="col-xs-4">
            <div class="row">
                <div class="col-xs-12">
                    <textarea class="form-control">This is some text</textarea>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <textarea class="form-control">This is some text</textarea>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <textarea class="form-control">This is some text</textarea>
                </div>
            </div>
        </div>
    </div>
</div>

$('textarea').elastic();

This looks like I want the final result to look. However, I don't know how much (or how little) text my users will be putting into the leftmost column. Is there a way to make the leftmost textarea arbitrary in size and have the right text areas be approximately the same size as the leftmost? — Matthew David Jankowski, Dec 30 '14 at 20:26

score 0 · Answer 2 · answered Dec 30 '14 at 19:02

0

try this one:

<table>
<tr>
    <th>LeftCol</th>
    <th>RightCol</th>
</tr>
<tr>
    <td rowspan="3" valign="top"><textarea id="initialText" rows="6">Initial Text</textarea></td>
    <td><textarea id="interText1" rows="2">Intermediate Text 1</textarea></td>
</tr>
<tr>
    <td><textarea id="interText2" rows="2">Intermediate Text 2</textarea></td>
</tr>
<tr>
    <td><textarea id="interText3" rows="2">Intermediate Text 3</textarea></td>
</tr>
</table>

answered Dec 30 '14 at 19:02

Iłya Bursov

23,342
4
33
57

This looks like I want the final result to look. However, I don't know how much (or how little) text my users will be putting into the leftmost column. Is there a way to make the leftmost textarea arbitrary in size and have the right text areas be approximately the same size as the leftmost? – Matthew David Jankowski Dec 30 '14 at 20:25
@MatthewDavidJankowski usually it is done via JS, here are bunch of variants, like this one http://stackoverflow.com/questions/995168/textarea-to-resize-based-on-content-length – Iłya Bursov Dec 30 '14 at 20:30

One text area adjacent to multiple smaller text areas?

2 Answers2