Раскрывающиеся списки в IE 8 при использовании с плагином jQuery tmpl

Question

Мне нужно показать четыре списка выбора на странице со следующими требованиями:

1. Общее пространство, выделенное для списков выбора, является фиксированным (скажем, 400 пикселей), т.е. 100 пикселей навыберите список.

2. Параметры намного больше, чем 100 пикселей.Требуется обеспечить, чтобы они не выглядели обрезанными, когда пользователь нажимает на список выбора, чтобы увидеть опции.

3. Решение должно работать в IE7 и IE8.

4. 4 списка выбора будут частью динамического шаблона, который связывается с помощью плагина knockoutjs и jquery tmpl.

Мне удалось получить первые 3требования выполняются с использованием приведенного ниже кода (имеет жестко запрограммированные значения для параметров).Когда я сделал это, параметры списка выбора не были отключены, когда пользователь пытался увидеть все параметры в IE8.

Мне также удалось динамически загрузить этот шаблон с помощью плагина jquery tmpl и нокаута (требование 4).Однако, когда я это сделал, опции выбора начинают отрубаться.

Вот код:

<div id="content" style="width: 400px">
<div id="first" style="width:23%; float:left">
    <div style="overflow: hidden; width: 100%">
        <select>
            <option value="a">This is just a random long line. We are using it to test dropdowns in IE 8</option>
            <option value="b">This is some more random text. </option>
            <option value="c">Still trying to fit in the text.</option>
        </select>
    </div>
</div>
<div id="gapOne" style="width:2%; float:left">
    <div style="overflow: hidden; width: 100%">

    </div>
</div>
<div id="second" style="width:23%; float:left">
    <div style="overflow: hidden; width: 100%">
        <select>
            <option value="a">This is just a random long line. We are using it to test dropdowns in IE 8</option>
            <option value="b">This is some more random text. </option>
            <option value="c">Still trying to fit in the text.</option>
        </select>
    </div>
</div>
<div id="gapTwo" style="width:2%; float:left">
    <div style="overflow: hidden; width: 100%">

    </div>
</div>
<div id="third" style="width:23%; float:left">
    <div style="overflow: hidden; width: 100%">
        <select>
                <option value="a">This is just a random long line. We are using it to test dropdowns in IE 8</option>
                <option value="b">This is some more random text. </option>
                <option value="c">Still trying to fit in the text.</option>
        </select>
    </div>
</div>
<div id="gapThree" style="width:2%; float:left">
    <div style="overflow: hidden; width: 100%">

    </div>
</div>
<div id="fourth" style="width:25%; float:left">
    <div style="overflow: hidden; width: 100%">
        <select>
            <option value="a">This is just a random long line. We are using it to test dropdowns in IE 8</option>
            <option value="b">This is some more random text. </option>
            <option value="c">Still trying to fit in the text.</option>
        </select>
    </div>
</div>

Это просто случайная длинная строка.Мы используем его для проверки выпадающих списков в IE 8. Это еще один случайный текст.Все еще пытаюсь вписаться в текст.Это просто случайная длинная строка.Мы используем его для проверки выпадающих списков в IE 8. Это еще один случайный текст.Все еще пытаюсь вписаться в текст.Это просто случайная длинная строка.Мы используем его для проверки выпадающих списков в IE 8. Это еще один случайный текст.Все еще пытаюсь вписаться в текст.Это просто случайная длинная строка.Мы используем его для проверки выпадающих списков в IE 8. Это еще один случайный текст.Все еще пытаюсь вписаться в текст.

Этот код должен работать с динамическими шаблонами?Если нет, как я могу выполнить свои требования?

Answer 1

Я помню, как видел подобную проблему в IE раньше с Knockout.Я думаю, что быстрое решение заключалось в следующем взломе: $ ("select"). Width ("100px");(или любой необходимой вам ширины) после применения привязок.Я помню, это влияло только на IE: -)