Results 1 to 5 of 5

Thread: How to add 2 columns in the textarea?

  1. #1

    Thread Starter
    Member
    Join Date
    Jan 2020
    Posts
    59

    How to add 2 columns in the textarea?

    Hello,

    How can I add 2 columns to the textarea below?

    Code:
    <div class="col-md-7">
    
                    <div class="form-group container-fluid">
                        <textarea class="form-control" id="result" rows="5" readonly></textarea>
    
                    </div>
                    <div class="form-group row container-fluid">
                        <div class="col">
                            <input id="btn_purchase" type="button" value="Purchase" class="btn btn-success"/>
                           
                        </div>
                       
                    </div>
    
                </div>

  2. #2
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,712

    Re: How to add 2 columns in the textarea?

    What are you trying to achieve?

    There is the column attribute: https://developer.mozilla.org/en-US/...area#attr-cols
    This specifies the visible width of the DOM.

    Then there is the concept of columns as in a table, which there is no built-in support for.
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

  3. #3

    Re: How to add 2 columns in the textarea?

    Hello...
    What you actually want is not Identified but for the Textarea have attribute "cols" using this attribute you can set a column of Textarea for more about it follow the below link.
    Cols attribute for Textarea
    < advertising removed by moderator >

  4. #4
    Super Moderator jmcilhinney's Avatar
    Join Date
    May 2005
    Location
    Sydney, Australia
    Posts
    110,299

    Re: How to add 2 columns in the textarea?

    Quote Originally Posted by Siddhi Patel View Post
    Hello...
    What you actually want is not Identified but for the Textarea have attribute "cols" using this attribute you can set a column of Textarea for more about it follow the below link.
    Cols attribute for Textarea
    I very much doubt that that is what the OP wants. That rows attribute is the number of lines of text is visible and that columns attribute is the number of characters visible in a line. I suspect that the OP wants a table within the textarea, which is not possible, as far as I'm aware.

  5. #5
    Hyperactive Member coothead's Avatar
    Join Date
    Oct 2007
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    284

    Re: How to add 2 columns in the textarea?

    Hi there HarshShah,

    here is something slightly silly for you to play around with...

    Code:
    
    <!DOCTYPE HTML>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
    
    <title>Untitled document</title>
    
    <!--<link rel="stylesheet" href="screen.css" media="screen">-->
    
    <style media="screen">
    body {
        background-color: #f0f0f0;
        font: normal 1em / 1.6em sans-serif;
     }
    #two-textareas {
        max-width: 50%;
        padding: 1em;
        margin: auto;
        border: 1px solid #000; 
        border-radius: 0.75em;
        background-color: #fff;	
        text-align: center;
     }
    #two-textareas div {
        display: flex;
        margin-bottom: 1em;
        border: 1px solid #000;
        border-radius: 0.5em;
        overflow:hidden;
     }
    #two-textareas textarea {
        display:block;
        width: 50%;
        padding: 0.5em 1em;
        border: 0;
        resize: vertical;
        background-color: #fee;
     }
    #two-textareas textarea:nth-of-type(1){
        border-right: 1px solid #000;
        background-color: #eef;	
     }
    </style>
    
    </head>
    <body>
    
    <form id="two-textareas" action="#">
     <div>
      <textarea name="ta" rows="2" required></textarea>
      <textarea name="ta" rows="2" required></textarea>
     </div>
     <input type="submit">
    </form>
    
    <script>
    (function( d ) {
       'use strict';
    var c, base, temp, ta = d.querySelectorAll('textarea[name="ta"]');
    for( c = 0; c < ta.length; c ++ ) {
         ta[c].addEventListener('input', increaseHeight(c), false);
         base = Number(ta[c].getAttribute('rows')) + 1;
      }
    
    function increaseHeight(c) {
         ta[c].oninput = function(){	
         temp = ta[c].getAttribute('rows');
    
    if ( ta[c].clientHeight < ta[c].scrollHeight ){
         ta[0].rows ++;
         ta[1].rows ++;
     }
    
    if ( temp >= ta[c].rows && ta[0].rows > base) {   
         ta[0].rows --;
         ta[1].rows --;	
       } 
      };
     }
    }( document ));
    </script>
    
    </body>
    </html>
    


    ~ the original bald headed old fart ~

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width