[FTUI3] stylebares Dropdown

[tomster]

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... 

[mr_petz]

Vorab Notlösung weil es so nicht vorgesehen ist. kann ich noch anpassen.

für FF Zeile 197 wie folgt tauschen.

Code Auswählen Erweitern

this.drop.style.left = (this.offsetParent.offsetWidth-this.selectElement.offsetWidth-1)/2+'px';
und für Chrome etc Zeile 202 wie folgt tauschen.

Code Auswählen Erweitern

this.drop.style.left = (this.selectElement.offsetWidth/4)+'px';


[tomster]

Klappt bei mir nicht. Die Droplist ist nun zwar leicht verschoben, aber noch nicht mittig...

[mr_petz]

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:

[tomster]

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:

Code Auswählen Erweitern

<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):

Code Auswählen Erweitern

([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:

Code Auswählen Erweitern

<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:

Code Auswählen Erweitern

<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">&nbsp;-&nbsp;</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!

[mr_petz]

Fehler vom Amt, kann so nicht funktionieren.

[tomster]

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

Code Auswählen Erweitern

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:

Code Auswählen Erweitern

<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>

[mr_petz]

Code Auswählen Erweitern

(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.

[mr_petz]

...

Ü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.

[tomster]

(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.

[mr_petz]

seltsam. habe es mit allen 3 Browsern getestet. px muss natürlich noch dahinter

Code Auswählen Erweitern

this.drop.style.left = (this.offsetParent.offsetWidth/2-this.selectElement.offsetWidth/2)+'px';

habe auch verschiedene grid größen getestet

[tomster]

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...