VF
я сделал через лейбл и дата атрибут, суть в том что при вводе в дата велью дублируется текст и потом подставляется в css content, кода минимум
Size: a a a
2020 November 13
VF
ну а use просто подгружает данные при инициализации
MZ
Vitaliy Fain
я сделал через лейбл и дата атрибут, суть в том что при вводе в дата велью дублируется текст и потом подставляется в css content, кода минимум
Ставишь текст в псевдоэлемент, и потом берёшь размер псевдоэлемента и подставляешь его в input?
VF
label.size::after {
content: attr(data-value) ' ';
visibility: hidden;
white-space: pre-wrap;
}
content: attr(data-value) ' ';
visibility: hidden;
white-space: pre-wrap;
}
VF
on:input={ e => e.target.parentNode.dataset.value = e.target.value} (надо перекинуть в use)
VF
еще не переписал
VF
в value просто подставляю данные с json
MZ
А размер паддинга, бордера просто дублируешь как в стилях?
VF
инпут обернут в лейбл
VF
ну тип того
VF
label.size::after, .size > input {
min-width: 1em;
padding: .5em;
margin-right: 3px;
}
min-width: 1em;
padding: .5em;
margin-right: 3px;
}
MZ
Ясно
VF
минус в том что нужно использовать грид
VF
label.size {
display: inline-grid;
width: auto;
}
display: inline-grid;
width: auto;
}
MZ
Ну ты что-то сложно-подчинённое сделал.
VF
хотелось методами css обойтись получилось частично, конечно странно почему до сих пор нету нормального решения и что бы инпут растягивался по ширине контента.
s🌝
Vitaliy Fain
style="width: {tab.name.length}+'px';"
style="width: {tab.name.length}px;"
VF
style="width: {tab.name.length}px;"
вроде пробовал видимо не сработало
MZ
Vitaliy Fain
вроде пробовал видимо не сработало
Сделать элемент шириной в кол-во символов? LOL
VF
Сделать элемент шириной в кол-во символов? LOL
Это пример вставки переменной в тег style