Вопросы Теги

Flask WTF SelectField изменить размер [дубликат]

php7: 

sudo a2enmod proxy_fcgi setenvif
sudo a2enconf php7.0-fpm
sudo service apache2 restart
194
задан Mark Bell 11 February 2015 в 06:08
поделиться

7 ответов

Вы можете использовать оба. Стиль css переопределит атрибут size в браузерах, поддерживающих CSS, и сделает поле правильной шириной, а для тех, кто этого не сделает, он вернется к указанному числу символов.

Редактировать : Я должен был упомянуть, что атрибут size не является точным методом калибровки: в соответствии со спецификацией HTML , он должен ссылаться на количество символов текущий шрифт, который будет отображаться сразу.

Однако, если указанный шрифт не является шрифтом с фиксированной шириной / моношириной, это not гарантирует, что указанное количество символов будет фактически видимым; в большинстве шрифтов разные символы будут различной ширины. В этом вопросе есть некоторые хорошие ответы, связанные с этой проблемой.

В приведенном ниже фрагменте показаны оба подхода. 

@font-face {
    font-family: 'Diplomata';
    font-style: normal;
    font-weight: 400;
    src: local('Diplomata'), local('Diplomata-Regular'), url(https://fonts.gstatic.com/s/diplomata/v8/8UgOK_RUxkBbV-q561I6kFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
@font-face {
    font-family: 'Open Sans Condensed';
    font-style: normal;
    font-weight: 300;
    src: local('Open Sans Condensed Light'), local('OpenSansCondensed-Light'), url(https://fonts.gstatic.com/s/opensanscondensed/v11/gk5FxslNkTTHtojXrkp-xBEur64QvLD-0IbiAdTUNXE.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
p {
  margin: 0 0 10px 0;
}
input {
  font-size: 20px;
}
.narrow-font {
  font-family: 'Open Sans Condensed', sans-serif;
}
.wide-font {
  font-family: 'Diplomata', cursive;
}
.set-width {
  width: 220px;
}
<p>
  <input type="text" size="10" class="narrow-font" value="0123456789" />
</p>
<p>
  <input type="text" size="10" class="wide-font" value="0123456789" />
</p>
<p>
  <input type="text" size="10" class="narrow-font set-width" value="0123456789" />
</p>
<p>
  <input type="text" size="10" class="wide-font set-width" value="0123456789" />
</p>

147
ответ дан Mark Bell 22 August 2018 в 02:33
поделиться
  • 1
    @Mark B. Спасибо за ваш ответ. Я использовал встроенный стиль, чтобы задать вопрос здесь. – rajakvk 27 September 2009 в 05:26
  • 2
    Не волнуйтесь - я думал, что у вас может быть, но я просто указал это на случай. – Mark Bell 27 September 2009 в 22:40
  • 3
    Большинство шрифтов не являются моноширинными. Что касается «количества символов, которое поле может отображать сразу» ... Какой символ вы имеете в виду? – Pacerier 26 January 2015 в 14:33
  • 4
    @Pacerier Количество символов в зависимости от того, какой шрифт использует вход: jsbin.com/zimako/1 – Mark Bell 26 January 2015 в 20:20
  • 5
    @jbyrd Да, это так, но ответ правильный в соответствии со спецификацией HTML. Теперь я отредактировал ответ, чтобы немного прояснить ситуацию. – Mark Bell 5 August 2015 в 10:19

HTML управляет семантическим значением элементов. CSS управляет макетом / стилем страницы. Используйте CSS, когда вы контролируете свой макет.

Короче говоря, никогда не используйте size = ""

2
ответ дан Chris Sobolewski 22 August 2018 в 02:33
поделиться
  • 1
    Размер может быть неотъемлемым по смыслу элемента; например, средний начальный символ имеет один символ. Имя, OTOH, не имеет ограничений по размеру, если только в вашей базе данных нет. – derobert 26 September 2009 в 07:53
  • 2
    @derobert: Я могу ошибаться, но обычно вы выражаете это, используя атрибут maxlength для ввода [type = text | password], а не атрибут size. – Horst Gutmann 26 September 2009 в 08:01
  • 3
    @Horst: Ну, я бы высказал средний начальный с обоими (поскольку этот предел имеет смысл для пользователя), а база данных ограничивает только максимальную длину. – derobert 26 September 2009 в 08:23

size несовместимо в разных браузерах и их возможных настройках шрифта.

Стиль width, установленный в px, будет по крайней мере согласован, по модулю вопросам выбора размера окна , Вы также можете установить стиль в «em», если хотите его по размеру относительно шрифта (хотя, опять же, это будет непоследовательно, если вы явно не зададите семейство и размер входного файла font) или «%», если вы делают форму для макета жидкости. В любом случае, таблица стилей, вероятно, предпочтительнее для встроенного атрибута style.

Вам все еще нужно size для <select multiple>, чтобы высота соответствовала соответствующим параметрам. Но я не использовал его на <input>.

20
ответ дан Community 22 August 2018 в 02:33
поделиться

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

Например, если у меня есть поле даты, я обычно хочу, чтобы поле было достаточно большим, чтобы отображать 8 или 10 символов (две цифры месяца и дня и два или четыре цифры года с разделителями). Установка атрибута размера по существу гарантирует мне, что вся дата будет видна с минимальным затраченным пространством. Аналогично для большинства чисел - я знаю диапазон ожидаемых значений, поэтому я устанавливаю атрибут size в соответствующее количество цифр, а также десятичную точку, если это применимо.

Насколько я могу судить, ни один CSS атрибут делает это. Например, установка ширины в em основана на высоте, а не на ширине, и поэтому не очень точная, если вы хотите отобразить известное количество символов.

Конечно, эта логика не " t всегда применяется - поле ввода имени, например, может содержать любое количество символов. В этих случаях я вернусь к свойствам ширины CSS, обычно в px. Однако я бы сказал, что большинство полей, которые я создаю, имеют какой-то известный контент, и, указав атрибут size, я могу убедиться, что наиболее содержимого в наиболее случаев, отображается без обрезки.

13
ответ дан ibrewster 22 August 2018 в 02:33
поделиться
  • 1
    Вы можете также использовать блок ex для этого, хотя использование размера по-прежнему упрощает большинство случаев, не имея десятков идентификаторов / классов в вашем CSS для ширины. – Forty 28 October 2017 в 18:06
  • 2
    @Forty На самом деле, вы не можете. ex является height символа (в частности, «X»), а не ширины - точно так же, как em. Поскольку не существует фиксированной связи между высотой и шириной символа (x или иначе), нет оснований полагать, что использование высоты символа для установки ширины поля сделает поле правильной шириной, чтобы показать любое заданное количество символов. В зависимости от шрифта он может быть более широким или узким. Теперь блок ch выглядит многообещающим, но не поддерживается в IE менее 9, что было бы проблемой, когда я это написал. – ibrewster 29 October 2017 в 17:44
  • 3
    Да, но высота x обычно не меньше ширины, большую часть времени на самом деле немного выше или почти одинакова, поэтому она становится совсем близкой. ch может быть лучше, к сожалению, некоторые нули тонкие, и это может не измерить полное пространство символов ... – Forty 30 October 2017 в 13:47
  • 4
    @Forty True, тем самым усиливая мою первоначальную точку, что нет хорошего атрибута CSS для установки ширины поля ввода на определенное количество символов, в то время как атрибут size стремится сделать именно это. Возможно, вы правы, что ex является разумной альтернативой, но факт остается фактом: атрибут высоты, а не атрибут ширины. size является атрибутом width, а не css. – ibrewster 30 October 2017 в 14:38
  • 5
    Это достаточно близко для использования, просто не практично для этого случая :) – Forty 30 October 2017 в 16:35

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

Наконец, я попытался изменить атрибут размера входных текстовых элементов и зафиксировал его. По какой-то причине атрибут размера превысил ширину css. Я использовал jQuery для динамического добавления строк в таблицу, и именно эти строки содержали входы. Поэтому, возможно, когда речь заходит о динамическом добавлении входов с помощью функции appendTo (), возможно, лучше установить атрибут размера вместе с шириной.

2
ответ дан mark 22 August 2018 в 02:33
поделиться

Вы получите большую согласованность, если используете ширину (ваш второй пример).

1
ответ дан Matt Howell 22 August 2018 в 02:33
поделиться

Я предлагаю, вероятно, лучший способ - установить ширину стиля в em-единице :) Итак, для размера ввода 20 символов просто установите style='width:20em':)

42
ответ дан xbonez 22 August 2018 в 02:33
поделиться
  • 1
    Интересный момент, однако в моих тестах ширина: 20em делает вход намного большим, чем 20 символов. – Christophe 27 September 2013 в 19:45
  • 2
    & Quot; ет & Quot; является мерой высоты символа «М», поэтому поле становится слишком большим. – humbads 30 September 2013 в 17:34
  • 3
    В CSS, em относится к размеру шрифта его прямого или ближайшего родителя. Пример: если унаследованный размер шрифта элемента равен 16px, и вы задаете размер шрифта как 2em, результирующий размер будет 32px (16px * 2em). & Quot; em & quot; единица не является количеством символов. Подробнее: w3.org/TR/css3-values/#font-relative-lengths и kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt -vs и j.eremy.net/confused-about-rem-and-em – delroh 25 September 2014 в 17:58
  • 4
    @humbads, вы не имеете в виду меру width символа «M»? – Jess 23 December 2015 в 14:48
  • 5
    @ Джесс, хороший вопрос. В типографии , «em» используется для обозначения ширины символа «M». Долгое время я верил в то же самое. Однако в CSS и цифровой типографии символ «em» равен высоте шрифта в точках. Это предназначено для размещения наборов символов, которые не имеют символа «М», или где «М» не является полной высотой или шириной шрифта. – humbads 23 December 2015 в 17:42
Другие вопросы по тегам:

Похожие вопросы: