bootstrap 2 input-append add-on

Question

I'm using bootstrap input-append add-on to add a icon to the end of the input field. This all works nicely. The issue is setting a width of 100% on the input pushes the add-on span tag outside the parents "input-wrapper" div viewable area. I'm using box-sizing: border-box; on all input fields. the only way I can seem to make this work is setting the parent div "input-wrapper" to display: flex; Unfortunately this is not an option as it's not supported in IE8 or 9. What other options do I have.

http://jsfiddle.net/chapster11/zjx2zc6e/

Example code.

        <div id="form-elements">
        <div class="input-wrapper input-append">
            <input id="paymentDate" class='paymentDate' type="text" />
            <span class="add-on"><i class="icon-th"></i></span>
        </div>
    </div>

CSS CODE

    #form-elements{
        margin: 20px;
    }

   input[type]{
     -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    max-height: 30px;
   }

    #paymentDate{
     height: 30px;
     width: 100%;
    }

    .input-wrapper{
        width: 600px;
        border: 1px dashed red;
    }

Answer 1

Edit: My bad, on Bootstrap2 there was an issue with the "input-block-level" feature working with addons (it works for all other inputs). A few people came up with some workarounds, mainly using a table display. You can see here: https://jsfiddle.net/BMironov/BVmUL/

Here is the CSS that handles it - you may want to play around with the way the add-on span works.

.input-append.input-block-level {
  display: table; 
}
.input-append.input-block-level .add-on {
  display: table-cell;
  width: 16px;
}
.input-append.input-block-level > input {
  box-sizing: border-box; 
  display: table;
  min-height: inherit;
  width: 100%;
}

.input-append.input-block-level > input {
  border-right: 0;
}

Instead of setting the input to 100% width, add the class input-block-level to the text input. You shouldn't need any additional CSS, that functionality is built into Bootstrap 2.