css - Resizing a Textarea inside HTML table -
i need have single column multiple rows of textarea elements take of available space in tables column each row. i've come conclusion need use percentages , on initial page load works fine, when attempting resize textarea wider causes weird behavior in chrome , firefox.
both browsers: column snaps wider size changes widths of other textareas have not been resized yet.
in chrome: textareas can no longer resized smaller first textarea adjusted , keeps trend going other textareas.
in firefox: textareas can resized smaller first textarea better still has initial hiccup of changing size of table's column. desired behavior can't chrome mimic firefox.
i've included testing html: jsbin
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>js bin</title> <style> table, th, td { border: 1px solid black; } td { width: auto; } textarea { width: 98%; min-height: 74px; min-width: 340px; } </style> </head> <body> <table style="width:100%"> <tr> <th>month</th> <th>description</th> <th>third</th> </tr> <tr> <td>january</td> <td><textarea cols="40" rows="5"></textarea></td> <td>something</td> </tr> <tr> <td>february</td> <td><textarea cols="40" rows="5"></textarea></td> <td>something</td> </tr> <tr> <td>march</td> <td><textarea cols="40" rows="5"></textarea></td> <td>something</td> </tr> <tr> <td>april</td> <td><textarea cols="40" rows="5"></textarea></td> <td>something</td> </tr> <tr> <td>may</td> <td><textarea cols="40" rows="5"></textarea></td> <td>something</td> </tr> <tr> <td>june</td> <td><textarea cols="40" rows="5"></textarea></td> <td>something</td> </tr> </table> </body> </html>
if make sure have max , min width not exceed sizes e.g.
textarea { max-width:60% !important; min-width:30% !important; }
use !important
flag overwrite other stylesheets connected page.
also if try adding classes or id's textarea such as
<textarea id='text-area'></textarea>
and attach styling
#text-area { max-width: 50% !important; min-width: 30% !important; }
i remove cols
, rows
keywords , see if style it
Comments
Post a Comment