Hi,
folgendes HTML...
<div
data-type="button"
data-icon="wi wi-forecast-io-partly-cloudy-day">
</div>
...liefert bei mir ein Button, bei dem das Icon aussieht wie nach oben verrutscht. Siehe Anhang "falsch.jpg". Das passiert (soweit ausprobiert) bei allen wi-Icons, aber bei keinen anderen.
Nach ein paar Klicks habe ich das hier gefunden:
.wi {
display: inline-block;
font-family: 'weathericons';
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
Das ist aus der weather-icons-wind.(min.)css. Der Übeltäter ist die Zeile mit "line-height".
Dummerweise wird das Ding dynamisch nachgeladen, und zwar sogar nach der fhem-tablet-ui-user.css. Ich konnte mir damit helfen, folgendes nach <body> zu packen:
<style>
.wi {
line-height: inherit;
}
</style>
Das funktioniert zwar (siehe "richtig.jpg"), ist aber eher hässlich.
Gibt es dafür eine bessere Lösung?
Gruß,
Thorsten
In der mitgelieferten https://github.com/knowthelist/fhem-tablet-ui/blob/master/www/tablet/lib/weather-icons.min.css ist dieser Eintrag schon raus gelöscht. Benutzt du eine eigene Version?
Zitat von: setstate am 22 Januar 2019, 17:56:01
In der mitgelieferten https://github.com/knowthelist/fhem-tablet-ui/blob/master/www/tablet/lib/weather-icons.min.css ist dieser Eintrag schon raus gelöscht. Benutzt du eine eigene Version?
Nein, ich habe keine eigene Version davon, aber bei mir benutzt das System die weather-icons
-wind.min.css. Sollte das nicht so sein?
Gruß,
Thorsten
Die weather-icons-wind.min.css wird vorrangig angezogen, wenn ein irgendwo auf der Seite ein wi-wind-* Icon verbaut ist.
Die line-height Zeile muss also auch noch aus der weather-icons-wind.min.css ausgelöscht werden.
Zitat von: setstate am 22 Januar 2019, 21:57:03
Die weather-icons-wind.min.css wird vorrangig angezogen, wenn ein irgendwo auf der Seite ein wi-wind-* Icon verbaut ist.
Das kann bei mir natürlich sein. Damit ich meine Werthilfen hinbekomme, habe ich immer mal wieder alle Icons irgendwo im DOM...
Zitat
Die line-height Zeile muss also auch noch aus der weather-icons-wind.min.css ausgelöscht werden.
Das wäre gut. Machst Du das?
Gruß,
Thorsten