Hi @all,
Ich habe dieses Thema nochmal aufgegriffen:
https://forum.fhem.de/index.php/topic,115259.msg1215870.html#msg1215870
Hier ging es um das Stylen des dropdown.
Ich habe jetzt die Erweiterung droplist nochmal überarbeitet.
Mit droplist ist das Stylen jetzt möglich und es funktioniert wie das dropdown.
Unter Android und IOS sieht es nicht mehr wie ein Dropdown aus und wird auch so nicht erkannt!
Getestet unter FF,Chrome und Safari.
Settings wie im wie im dropdown.
Bsp.:
<ftui-droplist class="size-2" left="10%" height="120px" style="--droplist-text-color:var(--black);--droplist-background-color:var(--medium-color);"
name="Sonoslist"
[list]="Sonos_Kueche:FavouritesListAlias"
[value]="Sonos_Kueche:FavouriteDropdown"
(value)="encode() | Sonos_Kueche:StartFavourite $value"
delimiter="|">
</ftui-droplist>
Hinzugekommen ist name="". Der kann ein get sein oder Frei vergeben werden. Dieser setzt dann den ausgewählten Eintrag.
Der Platz passt sich an. Je nachdem wie weit es rechts oder unten ist, klappt es weiter nach links oder oben auf. Es ist begrenzt im tile, aber nicht im row oder ähnlichen. Jetzt nicht mehr mit Attribute overflow.
Wenn es zu lang von der Höhe ist und es nicht mehr ins tile passt, sollte man ein height mitgeben.
width standard ist max-content
height standard ist 80px
left ist nicht vorgegeben.
name standard ist Droplist
styles:
--droplist-text-color
--droplist-background-color
--droplist-line-color
Schließen kann man es durch seitlichen click im view oder direkt durch Auswahl.
Edit: timeout hinzugefügt für das automatische Schließen. Standard 60sec. Mit timeout="0" wird es deaktiviert.
Zu finden ist es hier:
https://github.com/mr-petz/ftui/tree/droplist/www/ftui/components/droplist
Für Verbesserungen bzw. Erweiterungen bin ich offen...
Viel Spaß :)
LG mr_petz
Edit: border und overflow als Attribute hinzugefügt.
Prinzipiell schönes Ding, aaaaber...
Sollte es nicht so sein, dass man bei [ list ] das "human readable" Reading (z.B. ftuiFavoritesAlias) angibt (dessen Formatierung dann auch in der Droplist angezeigt wird) im Hintergrund aber dann die tatsächliche Formatierung der Favoriten aus [value] im set-Befehl landet?
Wenn ich das so mache, dann schickt der Code dummerweise die Alias-Formatierung als set-Befehl raus. Wird natürlich damit nicht umgeschaltet...
Vertausche ich die beiden Readings, dann wird zwar der richtige String übergeben, es stehen nur diese unschönen Underscores in der Droplist.
Ausserdem hab ich noch ein anderes Phänomen:
Wenn ich die FTUI-Seite aktualisiere, dann steht kurz der name der Liste (in obigem Beispiel "Sonoslist") im Display.
Sind dann alle Werte inititalisiert, steht dort plötztlich der komplette String aus dem [value]-Reading; also die Alias-Liste inlusive Delimitern. Optisch nicht grad schön...
Was mache ich falsch?
Wäre es zudem nicht von Vorteil, wenn in der Liste auch gleich bei der Initialisierung der aktuelle abgespielte/gewählte Favorit/Playlistname im an Stelle des name tags stünde?
Hi tomster, gibst du mir deinen Code und ein reading?
Logo! Danke!
<ftui-droplist class="size-3 bold" left="30%" height="250px" style="--droplist-text-color:var(--light);--droplist-background-color:var(--medium-color);" name="Favoriten" [list]="SB_WZ:ftuiFavoritesItems" [value]="SB_WZ:ftuiFavoritesAlias" (value)="SB_WZ:favorites $value" delimiter=":"></ftui-droplist>
Die readings sind von einem Squeezelite-Player:
ftuiFavoritesAlias
80s80s:80s80s Bowie:80s80s Freestyle:80s80s Funk Soul:80s80s HipHop:80s80s Italo:Arabella Muenchen:Bayern 1:Radio 2day:Radio Gong 963:Top FM 1064
ftuiFavoritesItems
80s80s:80s80s_Bowie:80s80s_Freestyle:80s80s_Funk_Soul:80s80s_HipHop:80s80s_Italo:Arabella_Muenchen:Bayern_1:Radio_2day:Radio_Gong_963:Top_FM_1064
favorites
80s80s_Funk_Soul
hast du es auch schon so probiert?
(value)="encode() | SB_WZ:favorites $value"
Das mit dem Namen ist mir auch ein Rätsel. Nirgens im Code ist Sonoslist hinterlegt.
Standard ist Droplist und wird nach setzen eines favoriten neu gesetzt.
Bei mir steht natürlich nicht Sonoslist, sondern Favoriten. Ich habe das im obigen Posting etwas mißverständlich formuliert (bezog sich auf Deinen Code aus dem Eröffnungsposting)...
Aber dieser Text wird bei mir eh nur kurz beim Laden der Seite angezeigt.
Alsbald die Seite initialisiert ist, verschwindet der Text Favoriten⌄ und es steht statt dessen der komplette String aus dem list-Tag da.
Also wirklich "80s80s:80s80s Bowie:80s80s Freestyle:80s80s Funk Soul:80s80s HipHop:80s80s Italo:Arabella Muenchen:Bayern 1:Radio 2day:Radio Gong 963:Top FM 1064" oder eben mit Underscores wenn ich anstatt ftuiFavoritesAlias eben ftuiFavoritesItems definiere. Nicht gerade schön...
Erst wenn ich manuell ein Item aus der Liste auswähle, steht nur noch die gewählte Playlist da.
Wäre es nicht "schöner", wenn nach dem Initialisieren das Playlist-reading angezeigt wird, das im Player als "currentPlaylistName" (oder wie das reading "now playing" auch immer heißen mag) hinterlegt ist? Egal, ob es gerade läuft oder gestoppt ist.
Manchmal mag man ja die Playlist mit Click auf Play nur fortsetzen und nicht durch Neuauswahl aus dem Dropdown "neu starten". Damit hätte das Widget quasi eine Doppelfunktion: Anzeigen & Auswahlmöglichkeit
Vielleicht reicht es ja, wenn man als name auch ein reading angeben könnte, so a la: [name]="SB_WZ:currentPlaylistName"
Dann steht nach dem Laden dort der Wert aus dem reading. Gerne auch mit caret vor und hinter dem Text. Erst wenn man dann auf diesen Text clickt, erscheint dann das Dropdown.
Was hältst Du davon?
Ach, und das mit dem encode() würde sicher funktionieren. Aber warum muss ich dann überhaupt ein list- und ein value-reading angeben?
Es würde ja reichen nur eines der beiden zu verwenden. Man müsste dann - je nach reading - nur entweder die Underscores für die Anzeige durch spaces ersetzen oder eben zum value-Senden encodete Leerzeichen hinzufügen, oder?
Kommando zurück!
Exakt diese Funktionalität ist ja schon eingebaut!
<ftui-droplist class="size-3 bold" left="30%" height="250px" style="--droplist-text-color:var(--light);--droplist-background-color:var(--medium-color);" name="Favoriten" [list]="SB_KUECHE:ftuiFavoritesAlias" [value]="SB_KUECHE:currentPlaylistName" (value)="encode() | SB_KUECHE:favorites $value" delimiter=":"></ftui-droplist>
Und es geschieht genau was ich mir vorgestellt habe!
Jetzt müsste man das Dropdown nur noch mittig positionieren können...
Eigentlich ist der delimmiter dafür zuständig die Readings zu "zerpflücken" und die _ zuersetzen.
value braucht eben den korrekten String zum set. Wenn er nicht korrekt vom reading kommt muss es seperat erfolgen.
Das mit der Inizialisierung muss ich mir nochmal ansehn.
wie hier im test hatbe ich mit Sonos da keine probleme.
https://forum.fhem.de/index.php/topic,115259.msg1215870.html#msg1215870
Hat sich überschnitten...
Und die delimiter zerpflücken ja nur die Sendernamen untereinander, nicht die Underscores in den Sendernamen.
Kannst Du mir noch verraten, was Deinen Code davon abhält sich mittig in einer row oder column platzieren zu lassen?
Theoretisch brauchst du den delimiter wegen deinem : nicht angeben weil das hier Standard ist:
delimiter: '[;,:|]'
mittig sollte eigentlich ganz normal gehen
Leider nein. Ohne eine left-Angabe, klebt das Widget leider immer links in einer row...
<center>
<ftui-droplist class="size-3 bold" height="250px" style="--droplist-text-color:var(--light);--droplist-background-color:var(--medium-color);"
name="Favoriten"
[list]="SB_KUECHE:ftuiFavoritesAlias"
[value]="SB_KUECHE:currentPlaylistName"
(value)="encode() | SB_KUECHE:favorites $value">
</ftui-droplist>
</center>
Danke! Damit steht es jetzt definitiv in der Mitte ;-)
Allerdings konnte ich jetzt erst vor Ort testen. Bei mir haut das mit dem URL-Encoding leider nicht hin.
Encoded werden ja die Spaces zu %20. Mein Player braucht aber tatsächlich Underscores...
Noch eine Frage:
Wo definiere ich im CSS, dass die Droplist ebenfalls mittig ausgeklappt wird?
Momentan "klebt" sie ja am rechten Rand...
Ich verstehe nicht deine Aussage. Wie meinst du daß es rechts klebt?
Die Droplist wird nicht mittig (=zentriert) ausgeklappt, sondern ist immer seitlich verschoben.
Da meine Spotify-Playlists teilweise sehr lange Namen haben, rutscht der rechte Rand der Droplist ganz nach rechts.
Ich hätte die Liste aber gern aber zentriert ausgeklappt. Leider finde ich die korrekte Stelle dafür im CSS nicht...
Vorab Notlösung weil es so nicht vorgesehen ist. kann ich noch anpassen.
für FF Zeile 197 wie folgt tauschen.
this.drop.style.left = (this.offsetParent.offsetWidth-this.selectElement.offsetWidth-1)/2+'px';
und für Chrome etc Zeile 202 wie folgt tauschen.
this.drop.style.left = (this.selectElement.offsetWidth/4)+'px';
Klappt bei mir nicht. Die Droplist ist nun zwar leicht verschoben, aber noch nicht mittig...
hab noch was oben hinzugefügt.
klappt nicht hilft mir nicht viel.
Screenshot eher
und welcher Browser
ich weis auch nicht ob du jetzt noch alles Original hast.
vvlt auch mal den grid zeigen als Code
bei Chrome,IE und FF sieht es so aus:
Sorry, wusste nicht dass das auch browserabhängig ist...
Ich nutze Fully, also Android Webview. Eigentlich müsste deshalb ja deine Chrome-Variante passen. Tut sie aber nicht.
Die FF-Version lässt sich schon deutlich besser an; aber leider auch nur "halb", sprich wohl nur für die erste Droplist auf meiner Seite...
Um das "halb" zu erklären, muss ich ein bisschen ausholen:
Ich habe in meinem FTUI-Code 2 Droplisten definiert, die je nach abgespielter LMS-Quelle angezeigt werden:
<center>
<ftui-droplist [hidden]="FavList:state | map('Radio:false, .*:true')" timeout="30" class="size-3 bold" style="--droplist-text-color:var(--light);--droplist-background-color:var(--medium-color);" height="250px" name="Favoriten" [list]="SB_WZ:ftuiFavoritesItems" [value]="SB_WZ:currentPlaylistName" (value)="SB_WZ:favorites $value" delimiter=":"></ftui-droplist>
<ftui-droplist [hidden]="FavList:state | map('Spotify:false, .*:true')" timeout="30" class="size-3 bold" style="--droplist-text-color:var(--light);--droplist-background-color:var(--medium-color);" height="250px" name="Playlists" [list]="SB_WZ:ftuiPlaylistsItems" [value]="SB_WZ:currentPlaylistName" (value)="SB_WZ:playlists $value" delimiter=":"></ftui-droplist>
</center>FavList wird über ein DOIF+notify befüllt. Diese beiden setzen eine Variable um immer die - je nach aktuell abgespielter Quelle (Radio oder Spotify) - entsprechend richtige Droplist anzuzeigen. Hier das DOIF (notify kannst Du dir sicher selbst erklären):
([SB_WZ:currentPlaylistName] =~ "Spotify.*" or [SB_WZ:currentPlaylistName] eq "-") ()
DOELSEIF
([SB_WZ:currentPlaylistName] ne "Spotify.*") ()
attr cmdState Spotify|Radio
Wenn nun jetzt aber z.B. Radio läuft und ich eine Spotify-Playlist abspielen möchte, dann clicke ich auf die entsprechende (für das Beispiel 2.) Schaltfläche, die ich wie folgt definiert habe:
<ftui-icon @click="sendFhem('set FavListCmd Radio')" path="./icons/mdt" name="mdt-radio" class="size-2" [color]="SB_WZ:currentPlaylistName | map('-|Spotify.*:light, .*:orange')"></ftui-icon>
...
<ftui-icon @click="sendFhem('set FavListCmd Spotify')" path="./icons/mdt" name="mdt-spotify" class="size-2" [color]="SB_WZ:currentPlaylistName | map('-|Spotify.*:green, .*:light')"></ftui-icon>
Damit wird dann FavList in meinem Beispiel auf "Spotify" gesetzt und deshalb auch die Droplist der Spotify-Playlists angezeigt. Damit kann ich dann auswählen, was kommen soll. Das notify setzt FavList dann nach 20 Sekunden wieder auf den Wert der tatsächlichen Quelle.
Sooo, nun zurück zum "halb":
Beim Laden der Seite steht FavList z.B. auf Radio. Die Radio-Droplist wird auch wunderbar mittig angezeigt beim Ausklappen. Clicke ich nun aber auf die Spotify-Schaltfläche (weil ich als nächstes diese Quelle spielen lassen will), dann wird die Formatierung auf diese Droplist nicht angewendet.
Ich hoffe, das ist verständlich fomuliert(?).
--edit--
Hier noch das gewünschte grid:
<ftui-grid-header>MEDIA PLAYER</ftui-grid-header>
<ftui-row style="margin-top:10px;">
<ftui-column width="15%" align-items="top">
<ftui-cell>
<ftui-icon @click="sendFhem('set FavListCmd Radio')" path="./icons/mdt" name="mdt-radio" class="size-2" [color]="SB_WZ:currentPlaylistName | map('-|Spotify.*:light, .*:orange')"></ftui-icon>
<ftui-label text="RADIO" align="bottom" class="bold size--1"></ftui-label>
</ftui-cell>
</ftui-column>
<ftui-column>
<ftui-row>
<ftui-image [src]="SB_WZ:coverarturl" height="15em" width="15em"></ftui-image>
</ftui-row>
</ftui-column>
<ftui-column width="15%" align-items="top">
<ftui-cell>
<ftui-icon @click="sendFhem('set FavListCmd Spotify')" path="./icons/mdt" name="mdt-spotify" class="size-2" [color]="SB_WZ:currentPlaylistName | map('-|Spotify.*:green, .*:light')"></ftui-icon>
<ftui-label text="SPOTIFY" align="bottom" class="bold size--1"></ftui-label>
</ftui-cell>
</ftui-column>
</ftui-row>
<ftui-row>
<center>
<ftui-droplist [hidden]="FavList:state | map('Radio:false, .*:true')" timeout="30" class="size-3 bold" style="--droplist-text-color:var(--light);--droplist-background-color:var(--medium-color);" height="250px" name="Favoriten" [list]="SB_WZ:ftuiFavoritesItems" [value]="SB_WZ:currentPlaylistName" (value)="SB_WZ:favorites $value" delimiter=":"></ftui-droplist>
<ftui-droplist [hidden]="FavList:state | map('Spotify:false, .*:true')" timeout="30" class="size-3 bold" style="--droplist-text-color:var(--light);--droplist-background-color:var(--medium-color);" height="250px" name="Playlists" [list]="SB_WZ:ftuiPlaylistsItems" [value]="SB_WZ:currentPlaylistName" (value)="SB_WZ:playlists $value" delimiter=":"></ftui-droplist>
</center>
</ftui-row>
<ftui-row width="2%" align-items="center">
<ftui-label [text]="SB_WZ:currentArtist" align="center" class="size-1"><span slot="unit"> - </span></ftui-label>
<ftui-label [text]="SB_WZ:currentTitle" align="center" class="size-1"></ftui-label>
</ftui-row>
</ftui-row>
<ftui-row></ftui-row>
<ftui-row width="90%" align-items="center">
<ftui-column width="5%"></ftui-column>
<!-- Repeat -->
<ftui-column>
<ftui-button size="small" fill="outline" [(value)]="SB_WZ:repeat" states="off,one,all" color="graybgr">
<ftui-icon path="./icons/mdt" [name]="SB_WZ:repeat | map('off:mdt-restore, one:mdt-restart, all:mdt-restore')" [color]="SB_WZ:repeat | map('off:light, one:orange, all:orange')" class="size-0"></ftui-icon>
</ftui-button>
</ftui-column>
<!-- Previous -->
<ftui-column>
<ftui-button size="small" fill="outline" [(value)]="SB_WZ" states="prev" color="graybgr">
<ftui-icon path="./icons/mdt" name="mdt-skip-previous" class="size-0" color="light"></ftui-icon>
</ftui-button>
</ftui-column>
<!-- Play/Pause -->
<ftui-column>
<ftui-button size="small" fill="outline" [value]="SB_WZ:playStatus | map('playing:play, paused|stopped|:pause')" (value)="SB_WZ" states="play,pause" color="graybgr">
<ftui-icon path="./icons/mdt" [name]="SB_WZ:playStatus | map ('playing:mdt-stop-circle-outline, paused|stopped|:mdt-play-circle-outline')" class="size-6" color="light"></ftui-icon>
</ftui-button>
</ftui-column>
<!-- Skip -->
<ftui-column>
<ftui-button size="small" fill="outline" [(value)]="SB_WZ" states="next" color="graybgr">
<ftui-icon path="./icons/mdt" name="mdt-skip-next" class="size-0" color="light"></ftui-icon>
</ftui-column>
<!-- Shuffle -->
<ftui-column>
<ftui-button size="small" fill="outline" [(value)]="SB_WZ:shuffle" states="off,song,album" color="graybgr">
<ftui-icon path="./icons/mdt" [name]="SB_WZ:shuffle | map('off:mdt-shuffle-variant, song:mdt-shuffle-variant, album:mdt-shuffle')" [color]="SB_WZ:shuffle | map('off:light, song:orange, album:orange')" class="size-0"></ftui-icon>
</ftui-button>
</ftui-column>
<ftui-column width="5%"></ftui-column>
</ftui-row>
<ftui-row>
</ftui-row>
<ftui-row>
<ftui-column width="15%">
<ftui-icon path="./icons/mdt" [name]="SB_WZ:playStatus | map ('playing:mdt-play, stopped:mdt-stop, paused:mdt-pause, .*:mdt-web-off')" [color]="SB_WZ:state | map ('playing:orange, stopped:``, paused:orange, .*:``')" class="size--1"></ftui-icon>
<ftui-label text="COUCH" align="bottom" class="bold size--1"></ftui-label>
</ftui-column>
<ftui-column width="3%"></ftui-column>
<ftui-column width="15%"><ftui-button [(value)]="SB_WZ" states="volumeDown" fill="none"><ftui-icon path="./icons/mdt" [name]="SB_WZ:volume | map('muted:mdt-volume-variant-off, .*:mdt-volume-medium')" class="iconclr" size="2"></ftui-icon></ftui-button></ftui-column>
<ftui-column><ftui-slider [(value)]="SB_WZ:volume" max="100" class="size--2" [hidden]="SB_WZ:volume | map('muted:true, .*:false')" readonly></ftui-slider></ftui-column>
<ftui-column width="15%"><ftui-button [(value)]="SB_WZ" states="volumeUp" fill="none"><ftui-icon path="./icons/mdt" name="mdt-volume-high" class="size-2 iconclr"></ftui-icon></ftui-button></ftui-column>
</ftui-row>
<ftui-row style="margin-top:15px;">
<ftui-column width="15%">
<ftui-button size="small" (value)="SB_KUECHE" states="sync K252Wohnzimmer,unsync" fill="outline" color="graybgr">
<ftui-icon path="./icons/mdt" [name]="SB_WZ:synced | map ('.*K252Kueche.*:mdt-link-variant, .*:mdt-link-variant-off')" [color]="SB_WZ:synced | map ('.*K252Kueche.*:orange, .*:light')" class="size--1"></ftui-icon>
</ftui-button>
<ftui-label text="KÜCHE" align="bottom" class="bold size--1"></ftui-label>
</ftui-column>
<ftui-column width="3%"></ftui-column>
<ftui-column width="15%"><ftui-button [(value)]="SB_KUECHE" states="volumeDown" fill="none"><ftui-icon path="./icons/mdt" [name]="SB_KUECHE:volume | map('muted:mdt-volume-variant-off, .*:mdt-volume-medium')" class="size-2 iconclr"></ftui-icon></ftui-button></ftui-column>
<ftui-column><ftui-slider [(value)]="SB_KUECHE:volume" max="100" class="size--2" [hidden]="SB_KUECHE:volume | map('muted:true, .*:false')" readonly></ftui-slider></ftui-column>
<ftui-column width="15%"><ftui-button [(value)]="SB_KUECHE" states="volumeUp" fill="none"><ftui-icon path="./icons/mdt" name="mdt-volume-high" class="size-2 iconclr"></ftui-icon></ftui-button></ftui-column>
</ftui-row>
<ftui-row style="margin-top:15px;">
<ftui-column width="15%">
<ftui-button size="small" (value)="SB_BALKON" states="sync K252Wohnzimmer,unsync" fill="outline" color="graybgr">
<ftui-icon path="./icons/mdt" [name]="SB_WZ:synced | map ('.*K252Balkon.*:mdt-link-variant, .*:mdt-link-variant-off')" [color]="SB_WZ:synced | map ('.*K252Balkon.*:orange, .*:light')" class="size--1"></ftui-icon>
</ftui-button>
<ftui-label text="BALKON" align="bottom" class="bold size--1"></ftui-label>
</ftui-column>
<ftui-column width="3%"></ftui-column>
<ftui-column width="15%"><ftui-button [(value)]="SB_BALKON" states="volumeDown" fill="none"><ftui-icon path="./icons/mdt" [name]="SB_BALKON:volume | map('muted:mdt-volume-variant-off, .*:mdt-volume-medium')" class="size-2 iconclr"></ftui-icon></ftui-button></ftui-column>
<ftui-column><ftui-slider [(value)]="SB_BALKON:volume" max="100" class="size--2" [hidden]="SB_BALKON:volume | map('muted:true, .*:false')" readonly></ftui-slider></ftui-column>
<ftui-column width="15%"><ftui-button [(value)]="SB_BALKON" states="volumeUp" fill="none"><ftui-icon path="./icons/mdt" name="mdt-volume-high" class="size-2 iconclr"></ftui-icon></ftui-button></ftui-column>
</ftui-row>
<ftui-row>
</ftui-row>
</ftui-grid-tile>
<ftui-grid-tile row="3" col="10" height="11" width="6" align-items="top" style="margin-bottom:10px;" hidden="true">
<ftui-grid-header>VOLUME</ftui-grid-header>
<ftui-cell height="100%">
<ftui-volume3d class="size-2" [(value)]="SB_WZ:volume" size="80" min="0" max="100" tick="50" step="2" wide-tick="10" degrees="250" rotation="0" has-wide-ticks has-gradient has-scale-text></ftui-volume3d>
</ftui-cell>
</ftui-grid-tile>
<ftui-grid-tile row="3" col="9" height="6" width="5" align-items="top" style="margin-bottom:10px;">
<ftui-grid-header>LOREM</ftui-grid-header>
<ftui-cell height="100%">
</ftui-cell>
</ftui-grid-tile>
<ftui-grid-tile row="3" col="14" height="6" width="5" align-items="top" style="margin-bottom:10px;">
<ftui-grid-header>IPSUM</ftui-grid-header>
<ftui-cell height="100%">
</ftui-cell>
</ftui-grid-tile>
<ftui-grid-tile row="9" col="9" height="7" width="10" align-items="top" style="margin-bottom:10px;">
<ftui-grid-header>VOLUME</ftui-grid-header>
<ftui-cell height="100%">
<ftui-volume3d class="size-2" [(value)]="SB_WZ:volume" size="80" min="0" max="100" tick="50" step="2" wide-tick="10" degrees="250" rotation="0" has-wide-ticks has-gradient has-scale-text></ftui-volume3d>
</ftui-cell>
</ftui-grid-tile>
--nochmal edit--
Auf Edge am PC funktioniert die FF-Variante einwandfrei!
Fehler vom Amt, kann so nicht funktionieren.
Wertes Fräulein vom Amt: tut es aber ;-)
Also, zumindest wenn Du die Funktionalität der Anzeige meinst...
--edit--
Wenn ich die Toast-Messages aktiviere, dann wird mir allerdings angezeigt
droplist.component.js:242 TypeError Cannot read properties of null (readings 'style')
Übrigens noch ein Nachtrag hinsichtlich des underscore-separiert/underscore-befreit Problems:
Einfach ein replace(/ /g, '_') | in das (value)-Feld einfügen, allerdings VOR dem Device-Define! Dann kann man das _-freie Reading ftuiFavoritesAlias für die Anzeige in der droplist nutzen und für den set-Befehl werden dann die Leerzeichen automatisch mit Underscores gefüllt:
<ftui-droplist timeout="30" class="size-3 bold" style="--droplist-text-color:var(--light);--droplist-background-color:var(--medium-color);" height="250px" name="Favoriten" [list]="SB_WZ:ftuiFavoritesAlias" [value]="SB_WZ:currentPlaylistName" (value)="replace(/ /g, '_') | SB_WZ:favorites $value" delimiter=":"></ftui-droplist>
(this.offsetParent.offsetWidth/2-this.selectElement.offsetWidth/2)
das wäre die Berechnung der Mitte von der Liste.
Müsste ich ein Attribute einfügen.
Zitat von: tomster am 17 April 2026, 13:03:48...
Übrigens noch ein Nachtrag hinsichtlich des underscore-separiert/underscore-befreit Problems:
Einfach ein replace(/ /g, '_') | in das (value)-Feld einfügen, allerdings VOR dem Device-Define! Dann kann man das _-freie Reading ftuiFavoritesAlias für die Anzeige in der droplist nutzen und für den set-Befehl werden dann die Leerzeichen automatisch mit Underscores gefüllt:
...
ja, bei einem set die pipes immer voran stellen.
Zitat von: mr_petz am 17 April 2026, 13:23:51(this.offsetParent.offsetWidth/2-this.selectElement.offsetWidth/2)
Damit funktioniert es aber bei mir nicht.
Auf meinem Testtablet (das Eigentliche mit anderer Displaygröße hängt 200 km entfernt an der Wand) funktioniert die obige FF-Version am Besten. Damit ist zumindest nach dem erstmaligen Laden die Liste in der Mitte.
seltsam. habe es mit allen 3 Browsern getestet. px muss natürlich noch dahinter
this.drop.style.left = (this.offsetParent.offsetWidth/2-this.selectElement.offsetWidth/2)+'px';
habe auch verschiedene grid größen getestet
Kommando (halb) zurück!
Entweder hab ich vorhin das +'px'; vergessen oder den Cache nicht geleert.
Nun steht die Liste zwar in der Mitte, aber ähnlich wie bei der FF-Variante, nur die Radio-Droplist. Wenn ich auf Spotify clicke steht die wieder irgendwo...