Hi here's my problem, hopefully somebody knows how to solve it:

I have a table with a text field in like so:

<table width=600>
<tr><td><input type="text" value="<?=htmlentities($sText)?>" style="width:100%;" maxlength="250"></td></tr></table>

Notice how I use the CSS style to make the text field stretch to the width of the parent table. (600 pixels)

Now that is all very fine. That's the result I'm after. The problem lies when I load some data into the text field, say from a database.

If the text I'm loading into it is too large to fit in the text field it streches the text field to accomodate it, also pushing out my table much wider then 600. This makes my page look very ugly.

This is very different from a text field's behaviour if I start typing it is empty. (It doesn't have a default value="" parameter) If I type too much text in this situation the result is it simply scrolls the text along. Which is what should happen.

How can I prevent the text field from stretching when it's loaded with data? If I remove the CSS width style, that is one way. However I need it so the text box will fill out the width of the parent table. That is the result I'm after.

If I add in the CSS property "table-layout:fixed" to the parent table that will stop the table from stretching. However the text field element will still stretch. How? Well, the result being the text field "cuts off" where it hits the table. So effectivly I can't access most of the data in the text field in this situation as it is not visable on the screen.

Does anyone know of a way in HTML and CSS so I can apply CCS to the text field so it will fill out to it's parents width (ie width:100%😉 whilst still not pushing out the parent table wider if there is too much content within it when it first loads in the browser. Is it possible? If I use a textarea element instead with a CSS width:100% attribute this problem doesn't happen. (however that is not what I want)

Please note again that the problem only occurs when loading data into the text field. If a text field loads empty you can type to your hearts content and it won't push out the table.

Thanks a lot. I would love to find a solution to this.
-Adam 🙂

    I don't think what you are trying to do is possible. In fact, it might not even work the way it is now if you look at it in different browsers.

    A text field's length is normally determined by the size property, which defines the number of characters wide it is. width is a CSS property normally used for a text element or an image. I think what is happening is that the browser is resizing the input element to the length of the text, since you used "width:100%."

    I am not sure that there is a way around it. You may just want to set the size parameter so that it properly fits within the table. I know you want to make it stretch so that it fits on different user screens, but sometimes that is just not feasible when you are creating a form.

      i think it is the use of the %. drop that and make the text input 600 pixels wide by changing the style to style="width: 600px;" . (or however large the inside of the table cell is after you subtract the padding ect.)

      using 'hard numbers' and percentages together is usually asking for problems, and should always be avoided.

        if you're concerned at all about netscape 4.x users, and you may not be, use size="anumber" along with your style for IE. IE will not use the size attribute if the style is present, and ns4.x will not even see the style and use the size="" attribute. if you're not concerned about ns4.x then disregard.

          Thanks. I guess I might have to set the width ccss property on the text fields explicitly like WebDesEyen said.

          The page is only to be viewed in IE, so I guess it should be ok. Usually I don't like setting the size attribute, cause stupid netscape renders elements larger then IE for the same size property. (even though in this case it's not applicable)

          Still, you would think there would be a way to do something as basic as this in HTML. Silly HTML peoples.

          thanks though.
          bye byes

          -Adam 🙂

            Write a Reply...