“Favorites of Success” logo Решение проблемы вёрстки поля input с шириной 100% внутри таблицы шириной 100%
© FAVOR.com.ua
 
Решение проблемы вёрстки поля input с шириной 100% внутри таблицы шириной 100%
  

Проблема поля ввода шириной 100% с длинным текстом внутри (<input width=100% value="очень очень ... длинный текст" />), растягивающая ширину страницы до немеряного состояния в глюкавом Internet Explorer’e оказалась решаема несколькими способами.

  1. Таблица вокруг input’a не должна иметь растягивающуюся ширину. Данный способ решает проблему, но не мою. Я всё-таки хочу растянуть и table и input до 100%, в моём случае это критично.
     
  2. Подождать полной загрузки страницы, запомнить ширину (clientWidth) input’a, присвоить полученное значение в input.style.width, а лишь затем заполнить value. Но это отстой. Окно браузера может растягиваться в процессе работы со страницей.
     
  3. После загрузки страницы всё это почему-то работает если в строке присутствует хотя бы один нелатиничный символ. Почему-то кириллица или пробел &nbsp; (не &nbsp; а именно его код, получаемый в результате) решает проблему.

    В javascript’e, для того чтобы быть уверенным что в тексте присутствует не только латиница, при присваивании input’у значения можно указывать что-то вроде:
    myinput.value.replace(/n/g, ' ')+unescape('%A0')

    Это работает в JS, однако, если устанавливать код в value из PHP — нет. Таблица остаётся растянутой.
     
  4. Короче, спустя сутки, я нашёл таки решение. В таблице стоящей вокруг input’a нужно устанавливать style="table-layout: fixed". И всё хорошо работает.

Если кому-то эти советы помогли, прошу оставить комментарий.

https://favor.com.ua/en/blogs/1968.html