Solved

Textarea Width 100%

Posted on 2006-06-12
5
1,140 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
  • 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Today I would like to talk about localizing (Internationalization) JavaScript applications. Introduction When creating an application that is going to be used by many people around the globe, it is important to remember that not everyone speak…
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
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…

911 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

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now