[FTUI3] Verschachtelte ftui-grid sperren ftui-tab

tamash · 23 Oktober 2023, 08:59:42

Hallo!

Ich mach gerade meine ersten Schritte mit FTUI3 um irgendwann meine FTUI2 Konfig zu ersetzen.
Bis jetzt bin richtig begeistert. Das ganze wirkt deutlich konsistenter und sehr aufgeräumt.
Daher erstmal vielen Dank und Respekt an die Entwickler.

Ich hab ein kleines Problem das gut und gerne ein PEBKAC-Error sein könnte.

Soweit ich verstanden habe muss/kann ich bei Verwendung von ftui-content die ftui-grid verschachteln. Das funktioniert auch exakt wie ich das erwarten würde. Allerdings ist nach dem Klick und Laden einer View (ftui-tab-view) keines der Icons in meiner tab-view mehr klickbar. Das lässt dich nur durch einen reload lösen.

Meine index.html definiert ein ftui-grid und ftui-tab (inkl. view) wie folgt:

Code Auswählen

<body>
        <ftui-grid base-width="80" base-height="80" margin="5" shape="round">
                <ftui-grid-tile row="1" col="1" height="10" width="1">
                        <ftui-column>
                                <ftui-tab view="View1" size="large" active>
                                        <ftui-icon name="home"></ftui-icon>
                                </ftui-tab>
                                <ftui-tab view="View2" size="large">
                                        <ftui-icon name="bath"></ftui-icon>
                                </ftui-tab>
                                <ftui-tab view="View3" size="large">
                                        <ftui-icon name="music"></ftui-icon>
                                </ftui-tab>
                        </ftui-column>
                </ftui-grid-tile>

                <ftui-tab-view id="View1">
                </ftui-tab-view>

                <ftui-tab-view id="View2">
                        <ftui-content file="content_bathroom_og.html"></ftui-content>
                </ftui-tab-view>

                <ftui-tab-view id="View3">
                </ftui-tab-view>
        </ftui-grid>

</body>

Meine content_bathroom_og.html:

Code Auswählen

<ftui-grid base-width="80" base-height="80" margin="5" shape="round">
        <ftui-grid-tile row="1" col="2" height="4" width="2">
                <header>Deckenlicht</header>
        </ftui-grid-tile>
        <ftui-grid-tile row="1" col="4" height="4" width="2">
                <header>test</header>
        </ftui-grid-tile>
</ftui-grid>

Wie gesagt: Klicke ich nun auf das bath-icon für view2 wir alles wie erwartet geladen aber danach sind die Icons für View1-3 nichtmehr klickbar. Bei View1 und View3 lässt sich dieses Verhalten nicht nachstellen. Daher gehe ich davon aus es handelt sich um Thema der verschachtelten ftui-grid elemente.

Mach ich hier irgendetwas grundlegend falsch oder könnte es sich um einen Bug handeln?

Danke im Voraus & LG
Tom

tobi01001 · 23 Oktober 2023, 10:29:39

Hast du mal mal im content file ohne ftui-grid Definition probiert?

Das ist ja übergeordnet definiert und solange du das grid selbst nicht ändern willst geügt es im view die grid tiles etc zu definieren.

Also anstatt:

Code Auswählen

<ftui-grid base-width="80" base-height="80" margin="5" shape="round">
        <ftui-grid-tile row="1" col="2" height="4" width="2">
                <header>Deckenlicht</header>
        </ftui-grid-tile>
        <ftui-grid-tile row="1" col="4" height="4" width="2">
                <header>test</header>
        </ftui-grid-tile>
</ftui-grid>

nur

Code Auswählen

        <ftui-grid-tile row="1" col="2" height="4" width="2">
                <header>Deckenlicht</header>
        </ftui-grid-tile>
        <ftui-grid-tile row="1" col="4" height="4" width="2">
                <header>test</header>
        </ftui-grid-tile>

tamash · 24 Oktober 2023, 08:29:48

Hi!

Ja, das war mein erster Ansatz. Das funktioniert leider nicht wenn man ftui-content verwendet. Dazu hab ich irgendwo einen post von setstate gefunden in dem er beschreibt, dass das nicht funktioniert dafür aber die Verschachtelung von ftui-grid möglich ist.

Ich hab gestern spät abends dann doch noch einen post gefunden in dem jemand etwas ähnliches beschreibt und die Lösung des Problems scheint z-index:1 zu sein:

Code Auswählen

<ftui-tab view="View3" size="large" style="z-index:1">
LG
Tom

tobi01001 · 24 Oktober 2023, 10:27:21

scheint in der Tat etwas komplizierter...

Ich hatte mich auf Bedienbarkeit des Menüs konzentriert. Das funktioniert, allerdings ist dann im content die grid Formatierung hin.
Daher hab ich das bei mir wahrscheinlich auch so wie im Beispiel "content2.html" erledigt - also content immer innerhalb grid tile geladen...
Eventuell ist das Bespiel "content.html" ja auch was für dich, wo das Menü über Footer definiert ist?

Ansonsten funktioniert es mit z-index:1, wieder was gelernt.

tamash · 27 Oktober 2023, 08:32:32

Ja, guter Tipp! Danke. Werd ich mir bei Gelegenheit mal ansehen.

Danke
Tom

FHEM Forum

[FTUI3] Verschachtelte ftui-grid sperren ftui-tab

tamash

tobi01001

tamash

tobi01001

tamash