-
Sep 3rd, 2020, 01:57 AM
#1
Thread Starter
Member
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>
-
Sep 11th, 2020, 01:28 PM
#2
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.
-
Oct 29th, 2020, 12:15 AM
#3
Member
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 >
-
Oct 29th, 2020, 01:57 AM
#4
Re: How to add 2 columns in the textarea?
Originally Posted by Siddhi Patel
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.
-
Oct 29th, 2020, 08:07 PM
#5
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
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|