Skip to content
Snippets Groups Projects
Verified Commit 179ad6d1 authored by Volker Schukai's avatar Volker Schukai :alien:
Browse files

chore: close issue #223

parent 6aa481c3
No related branches found
No related tags found
No related merge requests found
Expand all Hide whitespace changes
Inline Side-by-side
development/issues/closed/223.html 0 → 100644
+ 62
− 0
View file @ 179ad6d1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>optimize tree-menu #223</title>
<script src="223.mjs" type="module"></script>
</head>
<body>
<h1>optimize tree-menu #223</h1>
<p></p>
<ul>
<li class="monster-theme-primary-1"><a
href="https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/223">Issue #223</a></li>
<li><a href="/">Back to overview</a></li>
</ul>
<main>
<h2>Geht nicht</h2>
<monster-form>
<monster-field-set data-monster-option-labels-title="my title">
<label for="namex">NX</label>
<monster-select id="last-select"></monster-select>
<label for="name12">N10</label><input type="text" name="name42" id="name102" placeholder="Name4">
</monster-field-set>
<monster-field-set data-monster-option-labels-title="my title 2">
<label for="name99">N8</label><input type="text" name="name224" id="name228" placeholder="Nam22e4"
class="span-1">
</monster-field-set>
</monster-form>
<h2>Geht!!</h2>
<monster-form>
<div style="display: flex; flex-direction: column-reverse">
<monster-field-set data-monster-option-labels-title="my title 2">
<label for="name99">N8</label><input type="text" name="name224" id="name228" placeholder="Nam22e4"
class="span-1">
</monster-field-set>
<monster-field-set data-monster-option-labels-title="my title">
<label for="name8">N8</label><input type="text" name="name4" id="name8" placeholder="Name4"
class="span-1">
<label for="name9">N9</label><input type="text" name="name5" id="name9" placeholder="Name5">
<label for="name-x1">X1</label><input type="color" name="name-x1" id="name-x1" placeholder="Name-x1">
<label for="name-x2">X2</label>
<monster-toggle-switch name="name-x2" id="name-x2" placeholder="Name-x2"></monster-toggle-switch>
<label for="name10">N10</label><input type="text" name="name4" id="name10" placeholder="Name4">
<label for="namex">NX</label>
<monster-select id="last-select2"></monster-select>
<label for="name12">N10</label><input type="text" name="name42" id="name102" placeholder="Name4">
</monster-field-set>
</div>
</monster-form>
<div style="height:600px"></div>
</main>
</body>
</html>
development/issues/open/223.mjs → development/issues/closed/223.mjs
+ 70
− 0
View file @ 179ad6d1
......@@ -8,13 +8,62 @@
import "../../../source/components/style/property.pcss";
import "../../../source/components/style/color.pcss";
import "../../../source/components/style/link.pcss";
import "../../../source/components/style/form.pcss";
import "../../../source/components/style/normalize.pcss";
import "../../../source/components/style/typography.pcss";
import "../../../source/components/tree-menu/tree-menu.mjs";
import "../../../source/components/layout/split-panel.mjs";
import "../../../source/components/layout/panel.mjs";
import "../../../source/components/datatable/datasource/dom.mjs";
import "../../../source/components/datatable/datasource/rest.mjs";
import "../../../source/components/form/form.mjs";
import "../../../source/components/form/select.mjs";
import "../../../source/components/form/field-set.mjs";
const select = document.getElementById('last-select');
select.setOption('mapping.labelTemplate', '${name} (${alpha-2})')
select.setOption('mapping.valueTemplate', '${country-code}')
select.importOptions([
{
"name": "United Kingdom",
"alpha-2": "GB",
"country-code": "826",
},
{
"name": "Sweden",
"alpha-2": "SE",
"country-code": "752",
},
{
"name": "Germany",
"alpha-2": "DE",
"country-code": "276",
}
]);
const select2 = document.getElementById('last-select2');
select2.setOption('mapping.labelTemplate', '${name} (${alpha-2})')
select2.setOption('mapping.valueTemplate', '${country-code}')
select2.importOptions([
{
"name": "United Kingdom",
"alpha-2": "GB",
"country-code": "826",
},
{
"name": "Sweden",
"alpha-2": "SE",
"country-code": "752",
},
{
"name": "Germany",
"alpha-2": "DE",
"country-code": "276",
}
]);
......
development/issues/open/223.html deleted 100644 → 0
+ 0
− 35
View file @ 6aa481c3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>optimize tree-menu #223</title>
<script src="223.mjs" type="module"></script>
</head>
<body>
<h1>optimize tree-menu #223</h1>
<p></p>
<ul>
<li class="monster-theme-primary-1"><a
href="https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/223">Issue #223</a></li>
<li><a href="/">Back to overview</a></li>
</ul>
<main>
<monster-form>
<monster-field-set>
<monster-details data-monster-option-labels-button="click me">
Yeah, you opened me!
</monster-details>
<monster-details data-monster-option-labels-button="click me">
Yeah, you opened me!
</monster-details>
<monster-details data-monster-option-labels-button="click me">
Yeah, you opened me!
</monster-details>
</monster-field-set>
</monster-form>
</main>
</body>
</html>
source/components/form/style/field-set.pcss
+ 5
− 5
View file @ 179ad6d1
......@@ -11,8 +11,8 @@
@import "../../style/floating-ui.pcss";
[data-monster-role="container"] {
container-type: inline-size;
container-name: form-set;
container-type: inline-size ;
container-name: field-set;
margin-bottom: 1rem;
@mixin text;
}
......@@ -122,7 +122,7 @@ slot {
}
@container form-set (max-width: 1200px) {
@container field-set (max-width: 1200px) {
.multiple-columns {
......@@ -145,7 +145,7 @@ slot {
}
@container form-set (max-width: 800px) {
@container field-set (max-width: 800px) {
.multiple-columns {
......@@ -168,7 +168,7 @@ slot {
}
@container form-set (max-width: 500px) {
@container field-set (max-width: 500px) {
slot {
grid-template-columns: 1fr;
gap: 0;
......
source/components/form/stylesheet/field-set.mjs
+ 1
− 1
View file @ 179ad6d1
This diff is collapsed.
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment