HTML attribute: size
The size attribute defines the width of the and the height of the element. For the input , if the type attribute is text or password then it’s the number of characters. This must be an integer value of 0 or higher. If no size is specified, or an invalid value is specified, the input has no size declared, and the form control will be the default width based on the user agent. If CSS targets the element with properties impacting the width, CSS takes precedence.
The size attribute has no impact on constraint validation.
Try it
Examples
By adding size on some input types, the width of the input can be controlled. Adding size on a select changes the height, defining how many options are visible in the closed state.
label for="fruit">Enter a fruitlabel> input type="text" size="15" id="fruit" /> label for="vegetable">Enter a vegetablelabel> input type="text" id="vegetable" /> select name="fruits" size="5"> option>bananaoption> option>cherryoption> option>strawberryoption> option>durianoption> option>blueberryoption> select> select name="vegetables" size="5"> option>carrotoption> option>cucumberoption> option>caulifloweroption> option>celeryoption> option>collard greensoption> select>
Specifications
No specification found
No specification data found for html.elements.attribute.size .
Check for problems with this page or contribute a missing spec_url to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.
Browser compatibility
BCD tables only load in the browser
See also
Found a content problem with this page?
This page was last modified on Jun 30, 2023 by MDN contributors.
Your blueprint for a better internet.
Как изменить ширину input в таблице?
Нужно, чтобы ширина input была равна ширине текста. Проще говоря, текст полностью вмещался в input (не «скрывался» из за размера поля).
PS
Подобный вопрос, но с изменением размера input при вводе текста уже тут обсуждали.
Простой 2 комментария
Михаил Р., по условию задачи пока такого не может быть. Но если вдруг понадобится, тогда там где надо вставлю textarea.
Это работает, но у меня это будет работать немного криво.
Дело не в вашем коде, а в том, что у меня много input-ов. Слишком много.
Всё тормозит.
Можно просто при загрузке сделать ширину инпут по содержимому?
Без изменения ширины при дальнейшем вводе текста.
Евгений Иванов, на чистом css для input-ов вряд ли получится, так как для них ширина задается атрибутом size. Можно разве что схитрить и вместо input поставить например span и задать соответствующие стили
Либо все таки с помощью js изменить ширину всех input-ов при загрузке. А сколько input-ов то на странице примерно?
Интересно, может ли span выступать в роли input в плане отправки данных с формы? Звучит, конечно странно, да и делать так наверно не стоит. Сейчас объясню что не так с инпутами.
Вообщем идея была сделать таблицу. 30 колонок и 100 строк.
Каждому пользователю нужно было показать одну (его) строку и дать возможность её менять.
Итого 30 инпутов.
Но потом появилась идея показать некоторым пользователям 2 и более строк.
Инпутов на странице стало больше.
Методом научного тыка было определено, что:
— нахождение более 300 инпутов на странице вызывает замедление работы браузера (процессор память не загружены, видно дело в браузере).
— при сабмите формы с 1000 инпутов (знаем толк в развлечениях) происходит сбой (не буду уточнять что и как).
Я не хотел столько инпутов, но других простых вариантов сделать «таблицу» я не знаю.
Есть вариант с обычной таблицей (table) и перехватом клика по ячейке, с подставлением туда инпута.
Потом надо будет как то сохранять эти изменения (ajax?)
Идея интересная, но у меня это займет долгое время (плохо знаю jQuery).
Евгений Иванов, 1000 инпутов на одной странице? Да их же заполнить нереально одному юзеру, как минимум я бы и не стал начинать даже. Почему бы реально не воспользоваться ajax? Подгрузкой инпутов и сабмитом.
Таблица. И в реальности один юзер заполняет 30 инпутов.
Он видит 30 инпутов. 1 строку таблицы. У него ничего не глючит. Всего 30 инпутов.
20 юзеров заполнят 20х30 инпутов.
Админ может видеть всю таблицу. И вот тут возникают проблемы.
Решил пагинацией. Но в идеале надо делать как в гугл таблицах.
Над этим надо думать. Как будет время — подумаю. Задача интересная. Подобных решений в сети ещё не видел.
Как растянуть поле input на всю ширину ячейки таблицы
Как растянуть картинку на всю ширину ячейки таблицы QTableView?
Есть кусок полоски, хотелось бы чтобы вся эта полоска была была по всей ширине ячейки таблицы.
Растянуть input на всю доступную ширину
В форме 2 input’а. Ширина 2-ого 200px. Как сделать чтобы 1-ый занял всё остальное пространство.
Содержимое ячейки растянуть на всю ее ширину в TableView
Как сделать, чтобы progressBar занимал всю ячейку?
Дело в том, что тот код, который вы предоставили как раз работает так как вы хотите.
Другой вопрос, что скорее всего у вас и другие стили указаны..
Использование строки width: 100% в CSS даст вам нужный результат. Текстовое поле растянется на всю ширину ячейки.
Вот пример html файла со встроенным CSS кодом:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39
html> head> meta charset="utf-8"> title>Page/title> style> .new-table < border-style: solid; border-width: 1px; border-color: black; >.cell-one < width: 25%; >.cell-two < width: 75%; >.text-filter < width: 100%; >/style> /head> body> table class="new-table"> thead>. /thead> tbody> tr> td class="cell-one"> input type="text" class="text-filter"/> /td> td class="cell-two"> input type="text" class="text-filter"/> /td> /tr> /tbody> /table> /body> /html>
Все работает. Возможно у вас ошибка в другом.
Я так и не понял, зачем вы в таблице используете тег .
Добавлено через 1 минуту
Там для первого input прописан класс, а для второго класс отсутствует, поэтому так и отображается.
Картинка на всю ширину ячейки таблицы
Как сделать картинку на всю ширину ячейки таблицы, что-то не выходит. пробую так, самое простое. .
Как растянуть подменю на всю ширину экрана
Требуется растянуть блок с подменю на всю ширину экрана <!DOCTYPE html> <html lang="en"> .
Как растянуть кнопку на всю ширину экрана
Должно быть как на фото. Кнопка <a = href="#"> При уменьшении окна браузера текст остается по.
Как растянуть div на всю ширину сайта?
Можете ли вы мне подсказать как растянуть div на всю ширину сайта, width: 100% пробовал, див.
Как растянуть текст на всю ширину div?
Есть такой код: <div style="background-color: #00FF00; width: 100%; max-width: 800px; text-align.
Как растянуть строки на всю ширину QTableWidget?
В таблице два столбца, ширина первого должна подгоняться автоматом, а ширина второго фиксирована.