CODEWITHSUNDEEP
csstwitter-bootstrapinternet-explorer-8twitter-bootstrap-3
Joe
Joe

Reputation: 5487

Bootstrap text inputs in IE8

I am seeing an issue when viewing a website in IE8 (but which works fine when using the emulation mode in dev tools in IE 11).

In modern browsers I see what I would expect:

enter image description here

But in IE, I see the following:

enter image description here

I've added the html5 shim and respond,.js as suggested in the docs, and I've tried wrapping the controls in divs to manually size them, but I end up with gaps between the inputs that look pretty bad. Is there something obvious that I'm doing wrong here?

<form class="form-horizontal" role="form" style="max-width: 500px">
...

<div class="form-group">
    <label class="control-label col-sm-2">Phone</label>
    <div class="input-group">
        <span class="input-group-addon">
            <input type="radio" name="SearchMethod" value="2" class="radio-inline" />
        </span>
        <input type="text" id="phone" class="form-control" placeholder="Phone"  />
        <input type="text" id="phoneExt" class="form-control" maxlength="4" placeholder="Ext"  />
    </div>
</div>

Upvotes: 0

Views: 367

Answers (1)

cvrebert
cvrebert

Reputation: 9269

Your input group is invalid since it has two text input form-controls. Per the docs:

Basic example

Place one add-on or button on either side of an input. You may also place one on both sides of an input.

We do not support multiple add-ons on a single side.

We do not support multiple form-controls in a single input group.

So you'll need to either hack together some custom styles, or restructure your form.

Upvotes: 1

Related Questions