2013-10-04 4 views
0

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

<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> 
+0

пожалуйста, найдите минутку, чтобы создать рабочую скрипку (www.jsfiddle.net) с кодом – BeNdErR

+0

я добавил скрипку ссылки на пост. Спасибо за совет. http://jsfiddle.net/uJ7U6/ – nsmanners

+0

Работаю идеально для меня. – David

ответ

0

я был в состоянии повторить эту проблему в своей скрипке. Я использую Chrome версию версии 29.0.1547.76.

Все, что я должен был сделать, это добавить в декларации CSS для текстового поля.

textarea { 
    vertical-align:top; 
} 

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

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

Test его на свою пересмотренную скрипке: http://jsfiddle.net/uJ7U6/1/

Смежные вопросы