TextArea Resizing and Scrollbars in IE

Question

0.00/5 (No votes)

See more:

, +

Hi Friends,

I am trying to implement TextArea in my Asp.Net Web Forms.

Demo - http://jsfiddle.net/W7Rmv/[^]

Please check this fiddle with Chrome or Mozilla.
When I am trying to implement same TextArea, it asking rows and cols in aspx page and it is not working in IE.

What I have to change to implement same TextArea in my Asp.Net WebPage.

Basically, I want the same type of behavior in IE, that is re-size icons in right bottom corner of TextArea and no Scollbars.

Thank you,
Sindhu.

Posted 17-Sep-13 20:24pm

Naga Sindhura

Updated 18-Sep-13 4:05am

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)

v4

Add a Solution

2 solutions

Solution 2

use css like this

C#

#txtArea
{
   border-style:dashed;
    border-color:red;
    resize:none;

}

Posted 18-Sep-13 23:38pm

Member 10186638

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) · Accepted Answer · 2013-09-17T23:51:00

Solution 1

If you want the same TextArea in Asp.Net, then you can directly use that in the page.
Just add the HTML in aspx page, it will render as it is.

In case you want to access the control on Server Side (Code Behind), then add a runat="server" attribute to the TextArea like below.

HTML

<textarea runat="server" type="textarea" id="txtArea" placeholder="enter the message...">
</textarea>

[Update after discussion with OP]

Yes, as I checked, it is not working in IE.
This is because, the re-sizing is done by CSS resize property, which is not supported by IE.

Refer
1. Can I use CSS resize property?[^]
2. CSS3 resize Property[^]

There is a solution, Don't worry.

I researched and found out a workaround for it.

For removing scroll-bars, you have to write - style="overflow:hidden;".
To show re-size icons, you can try jQuery Resizable[^] plugin.

Demo

[Demo] jQuery TextArea Resizable[^]
Mark that it is working in IE as well.

You need jQuery and jQuery UI files for this.

Posted 17-Sep-13 23:51pm

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)

Updated 18-Sep-13 3:55am

v2

Comments

Naga Sindhura 18-Sep-13 6:14am

Hi Tadit, thanks for your reply. the textarea showing browser compatibility issue with IE. When user trying to drag textarea using bottom right corner icon it showing in chrome and other browsers not in IE(it showing vertical scroll bar). what i have to add resolve browser compatibility issue with textarea?

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 18-Sep-13 6:18am

Okay. Let me check it in IE. Hang on.

Naga Sindhura 18-Sep-13 6:28am

thank you, and sure Tadit Dash

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 18-Sep-13 6:46am

Yes, as I checked, it is not working in IE.
This is because, the re-sizing is done by css resize property, which is not supported by IE.

Refer -
1. Can I use CSS resize property?[^]
2. CSS3 resize Property[^]

There is a solution, Don't worry.

I researched and found out a workaround for it.

For removing scroll-bars, you have to write - style="overflow:hidden;".
To show re-size icons, you can try jQuery Resizable[^] plugin.

Demo - [Demo] jQuery TextArea Resizable[^]

Mark that it is working in IE also.

You need jQuery and jQuery UI files for this.

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 18-Sep-13 7:12am

Did you check my reply?

Naga Sindhura 18-Sep-13 8:49am

Hi Tadit, it's really helpful to me. I worked with this functionality it working fine in IE. The bottom right corner icon is showing outside of the div, Is the there any alternative showing slashes inside the div?

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 18-Sep-13 9:35am

No, I guess.
But if you will be able to define CSS (it is adding through the plugin) again in your page, then it can be done. However, it will be difficult and time consuming.

Rather the default behaviour is accepted as it is developed by jQuery community. Please go with that.

Please accept this answer, if it has helped you in any way.
This will help others to find the answer in one go and you will also be awarded with some points for this action...

Thanks,
Tadit

Naga Sindhura 18-Sep-13 9:45am

thank you Tadit.

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 18-Sep-13 9:51am

Most Welcome. My Pleasure... :)