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

Question

[Василий Аитов]

Прилагаю ссылку. возможно я изначально делаю неправильно(

Answer 1

[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);
});