I'm using an html textarea in one of my html pages. I'm using html5 boilerplate template. The pages can be viewed with out any problem in any device. But the textarea element cannot be stretched. The even the pattern at bottom right-hand corner in every textarea (which indicates that it can be stretched further) is not visible as well.
For further clarifications here's how the page looks like in PC (Chrome) and iPhone (safari). Output from Chrome browser
Output from Iphone Safari
You can see the textarea is showing differently on two devices. Also this shows the same behaviour in android devices as well.
Here is my code
echo(" <form method=\"post\" action=\"".$_SERVER['PHP_SELF']."\">
<text>Content name: </text><input type=\"text\" name=\"content_name\"/>
<text>Content type: </text><input type=\"text\" name=\"content_type\"/>
<text>Content value: </text><textarea cols=\"60\" name=\"content_value\" name=\"content_value\"></textarea>
<text></text><input class=\"submitbtn\" type=\"submit\" value=\"submit\" name=\"submit\"></input>
</form></div>");
Please tell me if I'm doing anything wrong. Thanks in advance.
You could remove cole="\60\" and set it using css like style="width: 100%;"
In order to stop chrome from showing the resize, you can add this to your style of the textarea element:
style = "resize: none;"
so you get
<textarea style=\"resize: none;\" cols=\"60\" name=\"content_value\" name=\"content_value\">