Solved

Textarea Width 100%

Posted on 2006-06-12
5
1,136 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
Change the 98% to make it whatever "fake margin" you want.
0
 

Author Comment

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

Featured Post

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (http://www.experts-exchange.com/A_3488.html), typical array handling might look like this: (CODE) B…
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…

772 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

10 Experts available now in Live!

Get 1:1 Help Now