jkimmel
/
l3config.js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

arrange input fields with flex

This commit is contained in:
Johannes Kimmel 2023-04-23 00:19:35 +02:00
parent 6690110216
commit f8aae256ce
2 changed files with 24 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
index.html
View File

@ -12,6 +12,25 @@
}
:invalid:not(form) {
border-color: red;
}
fieldset > div {
display: flex;
flex-wrap: wrap;
column-gap: 1ch;
align-content: stretch;
align-items: baseline;
justify-content: flex-end;
}
fieldset > div > :first-child {
flex: 0 0 auto;
}
fieldset select, input:not([type=checkbox]):not([type=radio]) {
text-align: right;
display: initial;
flex: 1;
width: initial;
min-width: 50%;
margin: 0.5rem 0;
}
</style>
</head>

8
l3config.js
View File

@ -121,11 +121,13 @@ class L3Input {
this.input = undefined;
}
node() {
let inner = []
let newLabel = undefined
if (this.label) {
newLabel = document.createElement('label');
newLabel.setAttribute('for', this.id);
newLabel.innerHTML = this.label;
inner.push(newLabel)
}
this.input = document.createElement('input');
@ -133,9 +135,7 @@ class L3Input {
for (const attr in this.attrs) {
this.input.setAttribute(attr, this.attrs[attr]);
}
let inner = (this.input.type === 'radio') ? [this.input, newLabel] : [newLabel, this.input];
inner = inner.filter(e => !!e);
inner.push(this.input)
if (this.datalist) {
let datalist = document.createElement('datalist');
@ -166,6 +166,7 @@ class L3Input {
option() {
switch (this.input.type) {
case 'radio':
case 'checkbox':
if (!this.input.checked || this.input.value == 'undefined') return undefined;
break;
default:
@ -184,6 +185,7 @@ class L3Input {
render() {
switch (this.input.type) {
case 'radio':
case 'checkbox':
if (!this.input.checked || this.input.value == 'undefined') return undefined;
break;
default: