CODEWITHSUNDEEP
htmlinternet-explorerfirefoxinternet-explorer-8
Stephen Oberauer
Stephen Oberauer

Reputation: 5405

In HTML, how can I get an input box to stretch in IE8?

I have uploaded the following simple HTML code to http://losthobbit.net/temp/anchor.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Anchor Test</title>
</head>
<body>
    <div style="width:100%;height:100%">
        <input maxlength="250" type="text" name="Text2" id="Text2" style="position: absolute;
                top: 13px; left: 265px; right: 15px; height: 20px; text-align: Left">
    </div>
</body>
</html>

As you can see, I've specified the left and right, but not the width, in order to get it to stretch.

In Chrome it stretches as one resizes the browser, but this does not work in IE8 or FireFox. Any ideas about how I can fix this?

Thank you

Please note that people are suggesting I use a width percentage... unfortunately it doesn't solve my problem. I want the exact same behaviour that I have in Chrome, which is that of a left and right anchor. This means that the stretching is not a fixed percentage.

Upvotes: 3

Views: 4486

Answers (3)

Peter
Peter

Reputation: 14518

You have to specify the percentage width explicitly on the <input type="text" /> for IE and firefox.

See this jsfiddle: http://jsfiddle.net/LKnJT/2/

It is quite quirky with the absolute positioning but it will make the textbox resize with the browser window.

Note: if you remove the style="width:100%;height:100%" from the div it will still resize in Chrome.

[Update]
Try this one: http://jsfiddle.net/LKnJT/5/. Tested in chrome and IE. It keeps the textbox between the left and right specifications.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Anchor Test</title>
    </head>
    <body>
        <div style="position:absolute;left:150px;right:20px;">
            <input maxlength="250" type="text" name="Text2" id="Text2" style="text-align:left;width:100%">
        </div>
    </body>
</html>

Upvotes: 2

Kon
Kon

Reputation: 27451

How much do you want it to stretch? You can specify width but set its value in terms of percentage: 

width: 40%;

UPDATE:

Apply this to the input:

float: right;
width: 80%;

Just make sure to clear float on the parent container.

Upvotes: 1

Andy E
Andy E

Reputation: 344803

Give the <input> a parent element, set your current styles on that and give the <input> element width:100%.

<div style="width:100%;height:100%">
  <span style="position: absolute; top: 13px; left: 265px; right: 15px; height: 20px; text-align: Left">
    <input maxlength="250" type="text" name="Text2" id="Text2" style="width:100%; height:100%;">
  </span>
</div>

Working demo: http://jsbin.com/ayiwa5

Upvotes: 6

Related Questions