Solved

Textarea Width 100%

Posted on 2006-06-12
5
1,156 Views
Last Modified: 2008-02-26
I'm trying to make a textarea that takes up 100% of the width of the DIV that contains it.

Using CSS, I gave it "width:100%" and that works pretty well in both FF and IE. However, when I TYPE anything into the box in IE, the width grows a little bit and pushes past the DIV's borders.

The style looks like this:

.quickViewTextArea {
      width: 100%;
      font-family:Verdana, Arial, Helvetica, sans-serif;
      font-size:11px;
}

If I get rid of the font stuff, the problem remains.

Any ideas? A better way to make a 100% width text area? I want it to flex as the page is resized.
0
Comment
Question by:aaron_karp
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
5 Comments
 
LVL 12

Expert Comment

by:UnexplainedWays
ID: 16892018
I just tried this code and it seems to work fine

<html>
<body>
  <div>
      <textarea style="width: 100%"></textarea>
  </div>
</body>
</html>


So my guess is it's the surounding code, so you might need to post that.

0
 

Author Comment

by:aaron_karp
ID: 16892091
Yeah, it's weird. You're right that it's the surrounding code. Through some trial and error, cut and paste, I narrowed it down to one class in my stylesheet:

.quickView {
      margin-left: 6px;
      margin-right: 6px;
}

And here's the code around the textarea:

            <div class="quickView">
                        <textarea class="quickViewTextArea " rows="30" cols="20"></textarea>
            </div>

For some reason, the margins are messing with everything. Weird. I guess I'll have to work around them? Any ideas why this is happening?
0
 
LVL 12

Accepted Solution

by:
UnexplainedWays earned 500 total points
ID: 16892122
The margin has me stumped, so i just wrote something that works


<html>
<style>

.quickView {
     width: 100%;
     margin-left: 0px;
     margin-right: 0px;
     padding:0px;
     text-align:center;
}

.quickViewTextArea {
     width: 98%;
     font-family:Verdana, Arial, Helvetica, sans-serif;
     font-size:11px;
}

</style>
<body>

<div class="quickView">
     <textarea class="quickViewTextArea"></textarea>
</div>

</body>
</html>
0
 
LVL 12

Expert Comment

by:UnexplainedWays
ID: 16892123
Change the 98% to make it whatever "fake margin" you want.
0
 

Author Comment

by:aaron_karp
ID: 16892153
Thanks for the help. I just scrapped those styles that were messing me up and added the padding/margins elsewhere =)
0

Featured Post

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

636 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question