Автоматическое изменение размера элемента SELECT в соответствии с шириной выбранного параметра
у меня есть select элемент с различными option в нем. Обычно select элемент получит свою ширину от самого большого option элемент, но я хочу, чтобы select элемент по умолчанию option ширина значения, которая короче. Когда пользователь выбирает другой option на select элемент должен изменять размер, чтобы весь текст всегда был виден в элементе.
:
на Chrome (Canary) он всегда получает ширину вернулся из 0.
в Firefox ширина get добавлена и не изменяется при выборе более короткой опции.
Safari: тот же результат, что и Chrome.
6 ответов
вы правы, нет простого или встроенного способа получить размер конкретной опции выбора. Вот это JsFiddle что делает то, что вы хотите.
это нормально с последними версиями Chrome, Firefox, IE, Opera and Safari .
я добавил скрытый выберите #width_tmp_select для вычисления ширины видимого выберите #resizing_select что мы хотим быть автоматическое изменение размера. Мы устанавливаем скрытый выбор для одного параметра, текст которого является текстом выбранного в данный момент параметра видимого выбора. Затем мы используем ширину скрытого выбора как ширину видимого выбора. Обратите внимание, что использование скрытого диапазона вместо скрытого выбора работает довольно хорошо, но ширина будет немного выключена, как указано Сами-аль-Субхи в комментарии ниже.
вот плагин, который я только что написал для этот вопрос это динамически создает и уничтожает макет span поэтому он не загромождает ваш html. Это помогает разделять проблемы, позволяет делегировать эту функциональность и позволяет легко повторно использовать несколько элементов.
включить этот JS в любом месте:
вы можете инициализировать плагин одним из двух способов:
HTML-код — добавить класс .resizeselect в любом выберите элемент:
JavaScript — вызов .resizeselect() на любом объекте jQuery:
Источник
настроить ширину ng-select на выбранные элементы / доступные параметры?
Я использую ng-select в проекте Ionic3 / Angular5, и я использую его конфигурацию множественного выбора. Представление ввода выбора всегда значительно шире, чем должно быть, чтобы содержать выбранные элементы или любой из доступных вариантов.
Я бы хотел, чтобы его размер был не меньше максимальной ширины, которую компонент имел бы, если бы был выбран любой из доступных параметров, и чтобы в противном случае ширина была такой, какая требуется для размещения активно выбранных параметров.
Можно ли заставить ng-select вести себя таким образом?
2 ответа
Я не уверен, есть ли у ng-select какой-либо встроенный способ делать то, что вы хотите. Но это блочный элемент, что означает, что вы можете контролировать его ширину по своему усмотрению. А в Angular вы можете динамически управлять стилем с помощью ngStyle . Например: определите функцию getWidth() с ngStyle.
Теперь в функции getWidth вы можете вернуть любое значение, которое хотите контролировать шириной. вы можете перебирать элементы и получать максимальную длину элемента, а затем переводить в пиксели. есть отношение длины строки к пикселю, которое вам может понадобиться поэкспериментировать. Вы также можете прослушивать события и возвращать ширину в зависимости от того, что выбрано в данный момент.
Добавление ng-select <.ng-dropdown-panel > в CSS это работает, но я хотел бы предложить добавить всплывающую подсказку при наведении курсора, создавая подстроку, а не добавляя css.
Источник
Как увеличить размер элемента?
Помощь в написании контрольных, курсовых и дипломных работ здесь.
Как увеличить размер картинок Есть несколько картинок и например радиокнопка. как можно увеличить размер всех только картинок.
Как увеличить размер кружочков у option? Как, собственно, увеличить размер кружочков у ? И изменить цвет как самого кружочка, так и.
Как увеличить размер меню сайта Помогите, пожалуйста! Как увеличить размер шрифта в меню сайта? Тема сайта Sirat
Как увеличить размер шрифта в комментариях на wordpress Установил на блог дискус комментарии отображаются очень мелким шрифтом скажите как увеличить размер.
Решение
Но все равно не работает.
Добавлено через 1 минуту рядом поставил теги он растягивается по всему контейнеру бутстрапа. Не понимаю что ограничивает select.
Добавлено через 1 минуту Нашёл! спасибо romantiqueamour, теперь буду знать про !important!
вновь возник вопрос, а как его сделать растягиваемым на всю ширину браузера?
Добавлено через 28 секунд т.е. при уменьшении и он бы тоже уменьшался
Как увеличить размер правого блока? (Первый контейнер) Доброго времени суток. Подскажите пожалуйста как увеличить размер правого блока? (Первый.
Увеличить размер иконок Ребят, появилась проблема, не могу отрыть место, где можно сменить размер данных иконок .
Увеличить размер текстового поля Прошу прощения за глупый вопрос, но никак не могу с этим разобраться, в силу малоопытности в.
Увеличить размер и поменячть цвет input-а Размещаю кнопку через input в определённом месте экрана, мне необходимо увеличить размер его ширину.
Источник
Почему CSS td width не работает?
почему не работает ширина CSS?
также, что влияния положения: фиксированный, абсолютный ЕТК имеют на ширинах тд если любые? Я ищу причину больше, чем исправление. Я надеюсь понять, как это работает.
11 ответов:
это может быть не то, что вы хотите услышать, но display: table-cell не учитывает ширину и будет свернут на основе ширины всей таблицы. Вы можете легко обойти это, просто имея display: block элемент внутри самой ячейки таблицы, ширину которой вы указываете, например
это не должно иметь большого значения, если
сам по себе position: fixed или абсолютный, потому что положение ячеек все статические относительно стол.
EDIT: я не могу взять кредит, но, как говорят комментарии, Вы можете просто использовать min-width вместо width вместо этого в ячейке таблицы.
вам лучше использовать table-layout: fixed
авто значение по умолчанию и с большими таблицами может вызвать немного задержки на стороне клиента в браузере перебирает его, чтобы проверить все размеры подходят.
основные намного лучше и быстрее отображается на странице. Структура таблицы зависит от общей ширины таблиц и ширины каждого из столбцов.
здесь он применяется к исходному примеру: JSFIDDLE, вы заметите, что остальные столбцы дробятся и перекрывают их содержимое. Мы можем исправить это с помощью еще нескольких CSS (все, что мне нужно было сделать, это добавить класс в первый TR):
причина, по которой он не работает в ссылке, которую вы предоставили, заключается в том, что вы пытаетесь отобразить столбец 300px плюс 52 столбца, охватывающих 7 столбцов каждый. Сократите количество столбцов, и это работает. Вы не можете поместиться так много на экране.
Если вы хотите, чтобы заставить столбцы соответствовать попробуйте установить:
смотрите мой jsfiddle:http://jsfiddle.net/Mkq8L/6/ @Майк я пока не могу комментировать.
причина в том, что вы не указали ширину таблицы, и вся ваша куча td переполнена.
вот например, Я дал таблице ширину 5000px, которая, как я думал, будет соответствовать вашим требованиям.
это тот же самый код, который вы предоставили, который я просто добавил в ширину таблицы.
Я считаю, что происходит, потому что ваши TD-это путь мимо ширины таблицы по умолчанию. Которые вы могли видеть, если вы вытаскиваете около 45 ваших td в каждом tr, (т. е. код, который вы предоставили в своем вопросе, а не jsfiddle) он работает точно отлично
Источник
CSS для настройки HTML-элемента SELECT
Когда речь заходит о кастомизации полей формы, наибольшую сложность представляет стилизация HTML-элемента select . В этом случае разработчики часто обращаются за библиотекой или фреймворком, в которых не всегда удачно и в полном объёме воспроизводится вся функциональность нативного элемента управления.
Если не брать во внимание суждения о ценности элементов управления select или подобных им, можно констатировать факт: полностью воссоздать их функции, учесть все нюансы поведения и сохранить доступность для людей с ограниченными возможностями — гиперсложная задача.
Ниже будет показано, что и как можно сделать с внешним видом select с помощью обычного CSS, оставаясь в рамках требований WCAG к доступности (читаемость, контрастность, пользовательские настройки), а также вариантов написания: справа-налево и слева-направо.
Основные стили
Сперва сбросим параметры текста.
Свойство font наследует все стили от контейнера(ов). Иногда при сбросе CSS указывают размер шрифта font-size , но в этом нет необходимости. font будет наследовать стили всех своих параметров: font-size , font-family , font-style , font-variant , font-weight , font-stretch и font-height (если установлено). Ещё он добавляет высоту строки line-height . В-общем, шрифт будет адаптироваться к изменениям, которые касаются всей страницы, либо с помощью надстроек, либо через настройки браузера/системы.
letter-spacing
Если пользователь (или автор) изменяет параметры текста, чтобы повлиять на расстояние между буквами, это не будет касаться предустановленных для поля значений. Наследование параметров font не повлияет на межбуквенное расстояние, поэтому нужно явно указать необходимость наследования значения letter-spacing: inherit . Это поможет соответствовать требованиям WCAG 2.1 Success Criterion 1.4.12: Text Spacing
word-spacing
Аналогично межбуквенному letter-spacing , значение word-spacing для управления интервалами между словами не будет наследоваться, если это не объявить явным образом. WCAG 1.4.12 применяется и для расстояния между словами.
line-height
Обратите внимание, что в коде не устанавливается высота строки line-height . Это значение нормально наследуется вместе с остальными параметрами шрифта в свойстве font . Если обнаружится, что это не так (например, из-за явной установки высоты строки ) можно добавить line-height: inherit , чтобы соответствовать WCAG 1.4.12.
Пример
В этом примере демонстрируется применение этого минимального набора стилей.
Как настроить стрелку для select
Часто, стрелка (индикатор того, что это выпадашка — поле выбора значений) по умолчанию плохо вписывается в дизайн и её лучше заменить на что-нибудь более подходящее. Вот необходимый минимум стилей, с помощью которых можно заменить стрелку у select :
Здесь удаляются стили, устанавливаемые браузером, освобождается место для графической стрелки, а затем новая картинка стрелки вставляется в качестве фона. Это должно применяться только в том случае, если select обычный и предназначен для выбора одиночного значения, а не нескольких ( multiple ).
Этот пример демонстрирует замену стрелки по умолчанию элементу select .
Продолжение настройки select
Стоит обратить внимание, что интервалы у текста не очень хороши. Потенциально можно сделать их более привлекательными, удобными и доступными для пользователей с помощью всего нескольких дополнительных стилей. Например, можно настроить border и padding . Эти два свойства расширяют базовые стили, описанные выше, чтобы сделать текстовые поля более удобными.
border
Изменение значений CSS-свойств для рамки поля сопряжено с риском. Согласно WCAG (SC 1.4.11: Non-text Contrast), если для элемента формы не вносить изменений в стили по умолчанию, то это никак не повлияет на контрастность. Тем не менее, с помощью border: 0.1em solid будет установлена толщина рамки на основе размера шрифта. Теперь рамка поля выбора будет масштабироваться вместе с текстом. Заодно она становится толще, чем используется по умолчанию в большинстве браузеров.
Здесь умышленно не установлен цвет рамки, чтобы позволить браузеру сделать это самостоятельно. Конечно, если фон страницы не белый, можно изменить цвет рамки.
padding
Трогать padding для select не обязательно. Однако, содержимое поля будет немного легче читать и использовать, если немного его настроить. Это поможет сделать отступы в select ближе к аналогичным в textarea и input , если их тоже предстоит настраивать.
Стилизация состояний select
Поля формы могут находиться в разных состояниях. Отключенное, сфокусированное, с ошибкой и обязательное — это наиболее распространенные состояния, которые можно применить к элементам управления. Не обязательно применять какие-либо из предлагаемых стилей, но можно использовать селекторы и логику, лежащие в их основе, чтобы реализовать состояния в собственной библиотеке шаблонов.
Отключено disabled
Отключенные поля исключаются из требований к контрастности WCAG, как и элементы управления интерфейса по умолчанию. Если ничего не делать, браузер самостоятельно сделает всё необходимое. Поэтому здесь не стоит что-то менять в настройках цвета фона поля или текста, достаточно позволить браузеру выполнить эту работу по его усмотрению.
Сфокусировано focused
WCAG SC 2.4.7 не рекомендует здесь ничего делать, согласно Technique G149, потому что браузер добавляет свой собственный стиль для фокуса. Тем не менее, можно сделать его ещё более очевидным, например, использовать синий контур с хорошим контрастом к белому и добавить тень:
Только для чтения readonly
Нативный элемент не поддерживает атрибут readonly .
Обязательное поле required
Пока label указывает, что поле обязательное (вместе с атрибутом required ), нет большой необходимости стилизовать select как-то особенно. Но, например, можно увеличить обязательному полю толщину границы слева. В совокупности с оформлением других полей это может дать достаточно информации. Можно не менять цвет рамки, позволяя наследование (по умолчанию от стилей пользовательского агента).
Поле с ошибками
Одной красной рамки тут будет недостаточно (из-за сбоев WCAG по контрасту и только по цвету), а массивные тени могут испачкать всю страницу. Слишком много усилий по привлечению внимания к ошибкам создают шум, требующий от пользователей больших усилий для их устранения. Вместо этого можно добавить небольшой индикатор в углу поля. Градиент, образующий красную метку, устанавливает белый цвет фона поля. Обратите внимание, здесь в первый раз полю select явно задаётся цвет фона.
Здесь не будет использоваться селектор :invalid , потому что он может негативно влиять на нативное представление ошибок в браузере. Вместо этого можно использовать наличие-отсутствие aria-invalid , не просто переключая его с true на false , а добавляя или удаляя этот атрибут. Поскольку стрелка, как было решено выше, также является фоновым изображением, её здесь придётся повторно установить, если речь об обычном select без множественного выбора ( multiple ).
Стили для интернационализации
Чтобы не сильно усложнять, здесь речь пойдёт только о стилях написания справа налево, а при необходимости, будет не трудно разобраться и адаптировать это.
Для нативного поля выбора select достаточно поправить только стили, которые написаны, исходя из ожиданий для языков с написанием слева направо, а именно: стрелка, индикаторы обязательности и ошибки, которые позиционируются в зависимости от того, с какой стороны пользователь начинает читать. Здесь достаточно переместить стрелку, красную метку и более толстую границу на противоположную сторону.
Стили режима высокой контрастности Windows
Поскольку используются нативные элементы управления, нет вмешательства в цвета и стили для критически важных функций, которые отсутствуют в WHCM, т.е. в основном были применены системные стили — в этом направлении особо ничего делать не нужно.
Стиль подсветки контура outline здесь хорошо адаптируется. Переключение в disabled работает, как и должно по умолчанию. Стили border не затрагивают цвет и не повлияют работу с любой контрастностью.
Единственное, что может теряться — это индикация ошибки. При таком небольшом количестве цветов (система WHCM) может понадобиться акцент на другом визуальном индикаторе ошибок. Например, использовать label , чтобы четко указать на ошибки.
Стили для печати
Толщина границы масштабируется в зависимости от размера шрифта — это можно игнорировать. Пользователь, скорее всего, выберет размер шрифта, который будет разборчивым. Фоном отключенных полей и полей с ошибками можно управлять в настройках печати. Размер текста для поля не изменялся, наследуется. Здесь ничего не надо делать.
Стили для тёмного режима (dark mode)
Тёмный режим — это функциональный запрос, который нужно создать для поддержки стилей. Здесь не будет примера, а только рекомендации. Достаточно выбрать цвет фона и цвет шрифта и не писать все новые стили с нуля.
Следует наследовать цвет текста и фон (или сделать его прозрачным) и выбрать цвет рамки, который по-прежнему соответствует требованиям контрастности. Стили состояния при фокусировке тоже нуждаются в достаточном контрасте. Метка для состояния при ошибке зависит от фонового градиента к белому, поэтому нужно будет полностью переопределить стили ошибок, в том числе для RTL. Отключенные ( disabled ) поля также потребуют некоторой работы, так как явно заданы цвета границ и текста.
Заключение
Пример стилизованного select в разных состояниях с сохранением WCAG-доступности.
Когда речь идет о стилизации полей формы, нужно обратить внимание на минимальный набор стилей, который понадобится, чтобы обеспечить соответствие общему дизайну и поддержку состояний, которые перечислены выше.
Похожие публикации, посвященные стилизации HTML-элемента select : Select Like It’s 2019 и Custom Select Styles with Pure CSS немного отличаются подходами, но заслуживают не меньшего внимания. Может быть эти варианты даже лучше соответствуют вашим целям и требованиям.