basic.symbol + status.badge in der Menüleiste (Badge wird "irgendwo" anzeigt)

[ReviloEgros]

Hi,

ich möchte diverse Gerätschaften von mir auf Updates prüfen, und mir diese in der menu.html anzeigen lassen. Allerdings sollen die Icons nur dann auftauchen, wenn auch Updates da sind, und mir dann über einen Badge anzeigen, wieviele verfügbar sind. Mit basic.icon funktioniert basic.badge wie es soll. Möchte ich den Badge jetzt allerdings bei einem basic.symbol haben, wird mir dieser "irgendwo" angezeigt, nur nicht am Symbol. Ist das ein Bug, oder funktioniert status.badge nur mit basic.icon?

badge.png

Auf dem Screenshot sieht man es deutlich. Der Badge hätte am Ubuntu Logo sein müssen.

[wvhn]

Etwas mehr Info wäre hilfreich:
- welche SV-Version nutzt Du?
- wie sieht der Code aus, mit dem Du die Icons und die Badges erzeugst?

Grundsätzlich funktioniert status.badge mit basic.symbol - siehe Inline-Doku. Dort werden ja live zwei Beispiele angezeigt. Ich will aber nicht ausschließen, dass es mit einzelnen icon-Typen zu Problemen kommen kann.

Gruß
Wolfram

[ReviloEgros]

Hab gerade nochmal ausgiebig gestestet und benutze die aktuelle develop. So binde ich die beiden ein:

 {{ basic.symbol('System.NUC.count', 'System.NUC.count', '', 'pics/icon/ubuntu.png', '', 'min', '', '', '', 'mini')}}
{{ status.badge('System.NUC.count.badge', 'System.NUC.count', '1', ['hidden','red']) }}

Im Firefox auf Ubuntu zeigt sich an der Stelle in der menu.html das Badge wie auf dem Screenshot zu sehen. Auf meinem Tablet mit Android 10 und Fully Browser werden die Badges alle richtig angezeigt. Füge ich basic.symbol und status.badge an anderen stellen ein, werden sie sowohl im Firefox auf dem PC als auch auf dem Tablet richtig dargestellt. Scheint wohl eine Mischung aus ungünstiger Stelle im Code und Browser/Version zu sein. Keine Ahnung. Da das Tablet es überall im Code richtig anzeigt, ist für mich die Sache "gelöst". Danke für deine Mühe!

PS: Aber eines ist mir bei dem ganzen geteste jetzt noch aufgefallen. Stelle ich den type vom basic.symbol z.B. auf btn-mini, passt der z-index vom Badge nicht mehr, und er wird hinter dem Button angezeigt, auf all meinen Browsern.

[wvhn]

Am besten schaust Du mal, ob irgendwelche Tags nicht sauber geschachtelt oder nicht geschlossen sind.

Um den z-Index kümmere ich mich. Die Funktion der Größenangabe mit/ohne Button ist neu und da habe ich nicht an den badge gedacht. Danke für den Hinweis.

Gruß
Wolfram

[wvhn]

ReviloEgros hast Du irgendwelche Besonderheiten auf der betreffenden Seite, oder hast Du den z-index in der Seite irgendwo selbst gesetzt?

Ich hab jetzt mal die Dokuseite aufgebohrt und ein basic.symbol mit der Option 'btn-mini' verwendet. Der status.badge wird dabei richtig angezeigt. Getestet mit Firefox unter Windows 10 und mit Safari unter iPad OS.

smartVISU verwendet den z-index nur in wenigen Ausnahmen. Deswegen sind die Elemente I.d.R. gleichwertig und so bestimmt die Reihenfolge im html-Dokument den z-index.

Gruß
Wolfram

[ReviloEgros]

Ne benutze nirgends den z-index. Pack das mal in die menu.html links neben die Icons oder rechts neben das smartVISU Logo. Wie gesagt, vielleicht ist es da einfach nur ne doofe stelle sowas hinzupacken. Vielleicht liegts auch dadran, das ich das Menü links verkleinert und den Content Bereich vergrössert hab? Aber eigentlich ja nicht. Ist ja nur die Breite gewesen. Achso, die Badges werden neben dem SV Logo richtig angezeigt bei mir, links bei den Icons sind die Badges quasi um eins nach Links verrückt, wenn mehrere basic.symbol angezeigt werden.

AFC3CF2C-FEE5-4547-905F-F6E3B8F4BBA6.png

[wvhn]

Das Verhalten kann ich bestätigen. Ursache für den verschobenen status.badge ist der Umbruch am Ende des <div> in der menu.html. Wegen der Eigenschaft "text-align:center" wird dies dann in der Mitte des <div> angezeigt. Wenn Du hinter das letzte Icon noch ein "&nbsp;" (ohne Anführungszeichen) setzt, stimmt die Anordnung. Wahrscheinlich gehen die Browser unterschiedlich mit dem Rest-Platz am Ende des <div> um.

Zusätzlich bekommt der Button in der Kopfzeile den z-index=10. Deshalb wird der badge mit z-index=auto verdeckt. Buttons im Seiteninhalt haben normalerweise die Eigenschaft z-index=auto. Ursache und Gegenmaßnahmen habe ich noch nicht gefunden. Ins Widget möchte ich keinen z-index aufnehmen, weil das Nebeneffekte haben kann. Es bleibt also nur, die Symbole in der Menüleiste ohne Button anzuzeigen, was eh besser aussieht.

Gruß
Wolfram