Проблема с изменением размера TextArea в Chrome

Question

Проблема с изменением размера TextArea в Chrome

0

У меня возникла проблема с повторной настройкой текстовой области в браузере Chrome. Когда я изменю размер области текста, чтобы быть более высоким, а затем снова измените размер до нормального размера, div не изменит размер до нормального размера. Проблема вызвана тем, что я использую "style =" display: table "Кто-нибудь знает об обходном пути для этого? Вы должны иметь возможность реплицировать мою проблему с помощью кода ниже на http://jsfiddle.net/uJ7U6/

<div style="display: table;">
    <div style="display: table-row">
        <div style="display: table-cell;">
            <span style="font-weight: bold">TextArea 1</span>
        </div>
        <div style="display: table-cell;">
            <span class="dialogControlLabel">TextArea 2</span>
        </div>
        <div style="display: table-cell;">
            <span style="font-weight: bold">TextArea 3</span>
        </div>
    </div>
    <div style="display: table-row">
        <div style="display: table-cell;">
            <textarea id="txtTextArea1" rows="3" cols="30"></textarea>
        </div>
        <div style="display: table-cell;">
            <textarea id="txtTextArea2" rows="3" cols="30"></textarea>
        </div>
        <div style="display: table-cell;">
            <textarea id="txtTextArea3" rows="3" cols="30"></textarea>
        </div>
    </div>
</div>
<div>
    <div style="display: table-row">
        <div style="display: table-cell;">
            <span class="dialogControlLabel">TextArea 4</span>
        </div>
        <div style="display: table-cell;">
            <span class="dialogControlLabel">TextArea 5</span>
        </div>
        <div style="display: table-cell;">
            <span class="dialogControlLabel">TextArea 6</span>
        </div>
    </div>
    <div style="display: table-row">
        <div style="display: table-cell;">
            <textarea id="txtTextArea4" rows="3" cols="30"></textarea>
        </div>
        <div style="display: table-cell;">
            <textarea id="txtTextArea5" rows="3" cols="30"></textarea>
        </div>
        <div style="display: table-cell;">
            <textarea id="txtTextArea6" rows="3" cols="30"></textarea>
        </div>
    </div>
</div>

nsmanners 04 окт. 2013, в 15:36

Источник

0

пожалуйста, найдите минутку, чтобы настроить рабочую скрипку (www.jsfiddle.net) с вашим кодом
BeNdErR 04 окт. 2013, в 13:07
0

Я добавил в пост ссылку на скрипку. Спасибо за совет. jsfiddle.net/uJ7U6
nsmanners 04 окт. 2013, в 13:44
0

Работает идеально для меня.
David 04 окт. 2013, в 13:49
0

Спасибо за ваш вклад, Дэвид. Ваш пост вдохновил меня проверить, была ли у меня последняя версия Chrome. Как только Chrome обновился, ошибка была исправлена.
nsmanners 04 окт. 2013, в 14:08

Показать ещё 2 комментария

Теги:

html

css

google-chrome

1 ответ

Ещё вопросы

пожалуйста, найдите минутку, чтобы настроить рабочую скрипку (www.jsfiddle.net) с вашим кодом
Я добавил в пост ссылку на скрипку. Спасибо за совет. jsfiddle.net/uJ7U6
Спасибо за ваш вклад, Дэвид. Ваш пост вдохновил меня проверить, была ли у меня последняя версия Chrome. Как только Chrome обновился, ошибка была исправлена.

robabby · Accepted Answer · 2013-10-04T12-54-00.000Z

Я смог воспроизвести проблему в вашей скрипке. Я использую версию Chrome версии 29.0.1547.76.

Все, что мне нужно было сделать, это добавить объявление CSS для textarea.

textarea {
    vertical-align:top;
}

Это позволяет мне изменять размер любого текстового поля и отвечать <td> на изменения размера.

например, переход от малого к большому в маленький.

Проверьте это на своей новой скрипке: http://jsfiddle.net/uJ7U6/1/