[Gelöst]Button-Größe in Pixel

[h3llraid3r]

Hi,

nachdem ich meinen Schwager in spe auch für fhem begeistert habe, hat er jetzt ein Problem, wo ich trotz Wiki und Forenrecherche nicht mehr weiter komme:

Er hätte gerne die Widgets (bspw Button) in einer pixel-definierten Größe. Das mit den Klassen und vorgegebenen Größen reicht ihm nicht aus...

Lässt sich das auf relativ einfache Art und Weise realisieren oder muss man da schon mehr mit CSS arbeiten?

Gruß Micha

[Standarduser]

Hast Du schon data-width und data-height probiert?
Das sollte eigentlich funktionieren.

Falls nicht, könntest Du vielleicht auch das Link-Widget nutzen.

Code Auswählen Erweitern

<div data-type="link"
data-width="230"
data-height="90"
data-color="white"
data-background-color="red"
data-icon="fa-tablet"
data-url="ftui_tab/index.html"
class="round bigger centered">Tablet
</div>

[h3llraid3r]

Beim Link ist das als Attribut aufgeführt, beim Button nicht.
Aber wir testen es mal 

[h3llraid3r]

Also bei den Buttons geht der Parameter leider nicht, beim Link wie von dir erwähnt schon.
Und ohne Button müsste man auf unterschiedliche Icons beim Drücken usw verzichten, das geht ja nur mit der Farbe...
Müsste doch eigentlich irgendwie gehen, die Größe und Breite von beliebigen Widgets absolut in Pixel anzugeben 

[setstate]

Code Auswählen Erweitern

data-size="130"

ergibt einen 130% Button

Code Auswählen Erweitern

data-size="130px"

ergibt einen 130px Button

[h3llraider]

Super, danke 

Das funktioniert schon mal für alle bisher getesteten Buttons usw...
Funktionieren tut es beim Label oder Clock leider nicht - weder mit px noch prozentual.
Hatte hier mal testweise font-size probiert, das wollte aber auch nicht.

Gibt es für text-basierte Widgets auch sowas?

[setstate]

kleiner Tipp noch: ab einer bestimmten Größe des Buttons, sieht es besser aus, wenn das Icon im Verhältnis zum Kreis etwas kleiner ist. Mit class="smallicon" erreicht man das.

Bei den Labels kann man feste Größen ganz einfach per style="font-size: 23px;" erreichen

[h3llraider]

Super, nochmals vielen Dank, so funktioniert es genauso, wie es soll