CODEWITHSUNDEEP
javascriptjqueryhtmlcss
chidori
chidori

Reputation: 1112

html table cells to display text entered in inputbox in a better way

I have a dynamic html table , where user fills in certain details. The problem is , last two input columns data length may be large at times. Can someone suggest me the best way to show the last two input boxes so that user , after filling the detail , would be able to look at the contents that he has entered with ease. With the current setup , he wont be able to look at the entire input box data at one glance.

HTML :

<table id="master_table" border="0">
     <tr>
     <th>COL1</th>
     <th>COL2</th>
     <th>COL3</th>
     <th>COL4</th>
     <td>&nbsp;</td>
     </tr>
     <tr>
     <td>
     <input type="text" name="col1" class="col1"/>
     </td>
         <td>
     <input type="text" name="col2" class="col2"/>
     </td>
         <td>
     <input type="text" name="col3" class="col3"/>
     </td>
         <td>
     <input type="text" name="col4" class="col4"/>
     </td>
         <td>
     <input type="button" name="addRow" class="add" value='Add'/>
     </td>
         <td>
     <input type="button" name="removeRow" class="removeRow" value='Delete'/>
     </td>
     </tr>
     <tr>
     <td colspan="4" align="center">
     <input type="button" name="submit_data" class="submit" value="Submit" onclick="myFunction()"/>
     </td>
     </tr>
     </table>

Fiddle demo :

FIDDLE PAGE

Update : Thanks to @dr Manish Joshi

I am able to achieve the desired result HERE.

But it works fine in jsfiddle , but when i tried run in browser it throws me javascript error.

uncaught typeerror cannot read property 'addeventlistener' of null

Upvotes: 1

Views: 2196

Answers (2)

Dr M L M J
Dr M L M J

Reputation: 2397

You can Try

   <td>
 <input type="text" name="col1" class="col1" length="20"/>
 </td>
     <td>
 <input type="text" name="col2" class="col2" length="20"/>
 </td>
     <td>
 <input type="text" name="col3" class="col3" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';"/>
 </td>
     <td>
 <input type="text" name="col4" class="col4"  onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';"/>
 </td>
     <td>

jsfiddle - http://jsfiddle.net/Vu8HC/6/

Edited :

as per codepen.io/vsync/pen/czgrf , your code will look like for textarea as follows

<html>
<head>
<style>
body{ background:#c0c0c0; color:#8c001a; }
/*( 'box-sizing' will not work with this code )*/
textarea{  
  /* box-sizing: padding-box; */
  overflow:hidden;
  /* demo only: */
  padding:10px;
  width:250px;
  font-size:14px;
  margin:50px auto;
  display:block;
  border-radius:10px;
  border:1px solid #8c001a;
}
</style>
</head>

<body>


<textarea rows='1' placeholder='Auto-Expanding Textarea'></textarea>

<script>
var textarea = document.querySelector('textarea');

textarea.addEventListener('keydown', autosize);

function autosize(){
var el = this;
  setTimeout(function(){
    el.style.cssText = 'height:auto; padding:0';
    // for box-sizing other than "content-box" use:
    // el.style.cssText = '-moz-box-sizing:content-box';
    el.style.cssText = 'height:' + el.scrollHeight + 'px';
  },0);
}
</script>

</body>
</html>

You can see working example in browser on this link : http://ayurvedvishva.com/e_nima/jstest

Upvotes: 1

codingrose
codingrose

Reputation: 15699

Use table-layout property. table-layout:fixed will adjust cells to take up equal space of the table.

Write:

#master_table{
    width:100%;
    table-layout:fixed;
}

Updated fiddle here.

Upvotes: 1

Related Questions