wieerwill/platform
1
0
Fork 0
mirror of https://github.com/hcengineering/platform.git synced 2025-04-23 16:56:07 +00:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Fix border EditBox and calculate width (#17)

Browse Source 
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov 2021-08-10 15:27:24 +03:00 committed by GitHub
parent 228fa41799
commit 6481872de2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 11 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
packages/ui/src/components/EditBox.svelte
View File

@ -32,7 +32,7 @@
const target = t as HTMLInputElement const target = t as HTMLInputElement
const value = target.value const value = target.value
text.innerHTML = (value === '' ? placeholder : value).replaceAll(' ', '&nbsp;') text.innerHTML = (value === '' ? placeholder : value).replaceAll(' ', '&nbsp;')
target.style.width = text.clientWidth + 6 + 'px' target.style.width = text.clientWidth + 8 + 'px'
} }
onMount(() => { onMount(() => {
@ -58,16 +58,19 @@
<style lang="scss"> <style lang="scss">
.text {
position: absolute;
visibility: hidden;
}
.editbox { .editbox {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-width: 50px; min-width: 50px;
height: auto; height: auto;
.text {
position: absolute;
visibility: hidden;
overflow: hidden;
white-space: pre-wrap;
}
.label { .label {
margin-bottom: 4px; margin-bottom: 4px;
font-size: 12px; font-size: 12px;
@ -81,14 +84,13 @@
input { input {
max-width: 100%; max-width: 100%;
height: 21px; height: 21px;
margin: -3px; margin: -4px;
padding: 2px; padding: 2px;
font-family: inherit; font-family: inherit;
font-size: 14px; font-size: inherit;
line-height: 150%;
color: var(--theme-caption-color); color: var(--theme-caption-color);
background-color: transparent; background-color: transparent;
border: 1px solid transparent; border: 2px solid transparent;
border-radius: 2px; border-radius: 2px;
outline: none; outline: none;