Solved

Textarea Width 100%

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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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…

726 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