Prevent Text Input expanding in IE

Question

Hi,

I am having a problem with an input field in IE. The code is for a portlet and widths need to be dynamic as the user can place the portlet on any of the three columns in the page which all have different widths. As always it works fine in FF but not in IE. In order to make the width dyanaic I have set width="100%". Data to populate the text input comes from a DB. When the page is rendered if there is a long URL the text input expands to fill the contents in IE but in FF it just stays the same width (ie 100% of the TD that it lives in). How can I stop IE from changing the width in order to fit the contents. Setting the width to a fixed width of 100px fixes the issue but I need to have the width as a percentage in order to accommodate the layout of the portlet wherever it is put in on the page.

I have tried overflow:hidden and word-wrap:break-word but I cant get either to work. Here is my input code and style sheets

<td class="right" >
    <input type="text" class="validate[custom[url]]" value="" id="linkText" name="communicationLink"  maxlength="500" maxsize="100" />
</td>

    .ofCommunicationsAdmin input {
    font-family: "Trebuchet MS";
    font-size: 11px;
    font-weight:normal;
    color:#333333;
    overflow:hidden;
    }



   .ofCommunicationsAdmin #linkText { 
    overflow:hidden; 
    width:100%; 
    border:1px 
    #cccccc solid; 
    background:#F4F7ED 
    top repeat-x;
    }

.ofCommunicationsAdmin td.right {
   vertical-align: top;   
   text-align: left;   
}

Answer 1

I have tried overflow:hidden and word-wrap:break-word

Yeah, they won't do anything useful on an input.

In order to make the width dyanaic I have set width="100%"

That should work, but the parent table needs to be constrained to a width and table-layout: fixed otherwise the auto-table-sizing algorithm comes into play, which is complicated, a bit broken, and probably won't do what you want.

This is an example of how I layout liquid forms. Note the use of the box-sizing hack to make the edges of different types of control line up exactly in browsers that support it (not IE6-7).

<table class="form">
    <col class="label" /><col class="input" />
    <tr>
        <td><label for="foo">Foo</label></td>
        <td><input type="text" name="foo" id="foo" value="bar" /></td>
    </tr>
</table>

table.form { table-layout: fixed; width: 100%; }
col.label { width: 6em; }   /* let col.input have the rest of the width */
table.form input, table.form textarea, table.form select {
    width: 100%;
    box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
}

Answer 2

I'm a little late to this party but I just ran across this problem myself.

If I understand the problem correctly, your markup looks something like this:

<table>
  <tr>
    <td>Whatever</td>
    <td><input /></td>
  </tr>
</table>

So the input is in the table. Also, in your CSS, you're setting the input to have a percentage-based width. However, when you put so much text into the input that it expands past that visible width, the table expands to fit the container.

It's really easy to fix this, but so random that there's not a lot of help out there for it. The solution is to add this to your CSS (I added it to my reset.css).

table {
  table-layout: fixed;
}

You can make it IE specific if you want to, but it doesn't do anything bad to the other browsers (that I've noticed).