Как в bootstrap 5 cделать input по размеру текста в нем (чтобы текст Фамилия Имя Длинное Отчество был полностью виден)?

Прилагаю ссылку. возможно я изначально делаю неправильно(
  • Вопрос задан
  • 82 просмотра
Пригласить эксперта
Ответы на вопрос 1
profesor08
@profesor08
Никак, только ручками вычислять. В нужный момент или при вводе устанавливай ему ширину равную ширине его области прокрутки input.scrollWidth. Далее надо к этой величине добавить поправку на наличие границ и внутренних отступов, только если получившийся размер оказался чуть меньше желаемого.

Сюда смотри только если все получилось

const resizeInput = (input) => {
	input.style.removeProperty("width");
	const { borderLeftWidth, borderRightWidth } = getComputedStyle(input);

	if (input.clientWidth < input.scrollWidth) {
		input.style.setProperty(
			"width",
			`calc(${input.scrollWidth}px + ${borderLeftWidth} + ${borderRightWidth})`
		);
	}
};

document.querySelectorAll("input").forEach((input) => {
	input.addEventListener("input", () => {
		resizeInput(input);
	});

	resizeInput(input);
});

Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы