Изменение размера текстового поля file_field_tag ​​для chrome и firefox

Question

Привет, ребята,

У меня проблема при попытке изменить текстовое поле по умолчанию file_field_tag ​​в chrome и FF, оно отлично работает в IE, но в других браузерах не применяет размер.

Мой код:

file_field_tag ​​"# {соответствия.id} _document",: size => '2

Не знаю, если я могучто-то не так, но я уверен, что это очень маленькая вещь, которую я пропустил.

Заранее спасибо

Answer 1

Спецификация HTML 4.01 говорит, что этот атрибут, в случае <input type="file">, определяет ширину в пикселях, а не в символах.

http://www.w3.org/TR/html4/interact/forms.html#h-17.4

Кроме того, вы должны использовать CSS для определения ширины. У вас есть два варианта: использовать встроенный стиль:

file_field_tag "#{compliance.id}_document", :style="width: 2em"

или (предпочтительно) добавьте класс в тег, а определения CSS поместите в вашу таблицу стилей:

file_field_tag "#{compliance.id}_document", :class="short"

/* CSS */
input.short {
  width: 2em;
}
/* ..or if you expect some intelligent browsers, you may be more specific: */
input[type='file'].short {
  width: 2em;
}

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

Для Firefox вы можете увидеть определения в файле forms.css. В моей системе это местоположение /usr/lib64/xulrunner-1.9.2/res/forms.css.

Существует определение, которое может вам помочь:

input[type="file"] > input[type="text"] {
  ....

Определите ширину для input[type="file"].short > input[type="text"], и все должно быть в порядке. Обратите внимание, что это правило может быть изменено в каждой версии браузера.