Fehler bei der Anzeige des Widget device.window im room_menu

[zaze]

Hallo Forum,
ich habe das Problem das sobald ich das Widget device.window in der Raumübersicht verwende, dies einen Ober-/ Unterstrich (unterhalb der oberen Zeile und zwischen den Icons selbst auch) verursacht. Verwende ich das Widget in einem Raum habe ich das Problem nicht und beim Widget basic.window ist das auch nicht. Leider bin ich nicht so fit, dass ich den Fehler selbst finde. An der zweizeiligen Anzeige liegt es nicht, das habe ich schon getestet. Meine SV Version ist die 3.4.0.
Vielleicht hat jemand von Euch eine Idee, einen Tip.
(Im Beispielbild im Raum Luca device.window und im Schlafzimmer basic.window verwendet)

Vielen lieben Dank schon mal vorab,
ZazeIMG_9324-klein.png

[wvhn]

Moin zaze,

da bist Du auf ein interessantes Phänomen gestoßen. Sobald ein Element mit einem Anchor-Tag (<a>) im Menüpunkt verwendet wird, wird in die anderen Elemente des Menüpunkts auch ein Anchor-Tag eingebaut. Das passiert auch, wenn man z.B. in einem basic.symbol den Parameter "href" setzt. Das muss ich näher untersuchen.

Abstellen kannst Du die Anzeige des Unterstrichs in der visu.css im Ordner Deiner Seiten:

.ui-listview .ui-li-aside a {
    text-decoration: none;
}
​

Eigentlich sind die device.window nicht für das Raum-Menü gemacht. Wenn Du mehrere verwendest, musst Du jedem eine eindeutige ID geben, da die IDs sonst doppelt vorkommen und zu Konflikten führen.

Gruß
Wolfram

[wvhn]

Das Problem hier ist, dass durch Verwendung von device.window ein "nested anchor" entsteht, was eigentlich verboten ist. Der Browser versucht, daraus etwas Brauchbares zu machen und ergänzt bei allen anderen Elementen ein anchor tag mit dem übergeordneten Link.

Um das zu vermeiden, sollten Menüpunkte mit aktiven Elementen statt wie bisher

<li data-icon="false">
    <a href="index.php?page=rmyRoom">
        <img class="icon" src="{{ icon0 }}scene_office.svg" alt="myRoom" />
        <h3>Raumname</h3>
        <div class="ui-li-aside">
            {{ basic.symbol('', 'myRoomItem', '', 'light_table_lamp.svg', 1, '', 'icon1') }}
            {{ device.window('','', 'myRoomItem1', '','','', 'myRoomItem2','','icon') }}
        </div>
    </a>
​</li>
​

folgendermaßen aufgebaut werden:

<li data-icon="false">
    <a href="index.php?page=rmyRoom">
        <img class="icon" src="{{ icon0 }}scene_office.svg" alt="myRoom" />
        <h3>Raumname</h3>
    </a>
    <div class="ui-li-aside">
        {{ basic.symbol('', 'myRoomItem', '', 'light_table_lamp.svg', 1, '', 'icon1') }}
        {{ device.window('','', 'myRoomItem1', '','','', 'myRoomItem2','','icon') }}
    </div>
</li>​

Dazu muss man für eine korrekte Darstellung in der visu.css folgendes ergänzen:

/** wird nur für Versionen bis v3.4 benötigt  */
.ui-li-aside {
    z-index:3;
}

Ich werde das in der nächsten Version in allen Beispielen umbauen und auch prüfen, ob wir das im smartvisu-Plugin ändern müssen. Wer aktive Elemente in seinem Raummenü verwenden will, muss dieses aber selbst umstelllen.

Gruß
Wolfram

EDIT: z-index:3 ist besser, weil es dann auch im Quad-Design funktioniert.
Die base.css, Beispiele, Vorlagen und auch die Templates im smartvisu-Plugin von shNG sind inzwischen in den develop branches angepasst.
Nach der Umstellung muss man die Schaltflächen nun links neben den Symbolen anklicken, wenn man einen Raum aufrufen will, da jedes Symbol einen Platz außerhalb des <a>-tags beansprucht. Da die Schaltflächen groß sind, ist das IMHO eine sehr geringfügige Einschränkung.

[zaze]

Hallo Wolfram,
herzlichen Dank für die super schnelle Analyse und Lösung !

Werde das heute mal umsetzen. Da wir die smartvisu hauptsächlich mit den Smartphones hier im Haus nutzen ist die Raumübersicht für uns mit am wichtigsten, daher hab ich die aktiven Widgets dort eingebaut.

Vielen Dank !
Zaze

[zaze]

Super das hat geklappt, jetzt siehts wieder klasse aus.

Nochmal vielen Dank!