Darstellungsfehler bei ftui-segment-button

Begonnen von Marko1976, 29 Dezember 2024, 21:31:48

Vorheriges Thema - Nächstes Thema

Marko1976

Hallo zusammen,

ich habe einen grafischen Fehler für den ich keine Lösung finde.
Ich nutze zur Steuerung sowohl auf meinem Handy als auch auf Tablets je eine Instanz von FTZUI3.
Für meine Lichter gibt es eine Schaltung die zwischen "Dauerhaft Aus", "Dauerhaft Ein" und "Automatik" wechselt. Das steuere ich über einen ftui-segment mit 3 ftui-segment-button jeweils mit einem ftui-Label darauf.

Den Code füge ich hier mal an:
<ftui-segment [(value)]="{{device}}_hmi" [hidden]="{{device}}:show_automatic | map('0:true, 1:false')">
<ftui-segment-button value="Off" fill="none" style="margin-left: 15px; margin-right: 15px; margin-top: 5px; margin-bottom: 5px;">
<ftui-label size="3" class="bold" color="dark" text="Off"></ftui-label>
</ftui-segment-button>
<ftui-segment-button value="Auto" style="margin-left: 15px; margin-right: 15px; margin-top: 5px; margin-bottom: 5px;">
<ftui-label size="3" class="bold" color="dark" text="Auto"></ftui-label>
</ftui-segment-button>
<ftui-segment-button value="On" style="margin-left: 15px; margin-right: 15px; margin-top: 5px; margin-bottom: 5px;">
<ftui-label size="3" class="bold" color="dark" text="On"></ftui-label>
</ftui-segment-button>
</ftui-segment>

Wie man auf dem Screenshot sieht wird die blaue Buttonfläche aber bei der mittleren und rechten Schatfläche nicht richtig über den Text gelegt sondern nach Links verschoben und ich weiß nicht woher das kommt.
Das einzige was mir in den Sinn kam war das Style-Attribut mit den margin-Einstellungen, doch das konnte ich ausschließen.
Auch suche ich noch nach einer Möglichkeit die Farbe der Button-Markierung zu ändern, als auch etwas Abstand zwischen die einzelnen Buttons zu bringen.