Weather-Icons haben falsche Größe bzw. falsche Position

Begonnen von Thorsten Pferdekaemper, 22 Januar 2019, 16:53:47

Vorheriges Thema - Nächstes Thema
Drucken
Nach unten Seiten1
Benutzer-Aktionen

Thorsten Pferdekaemper

22 Januar 2019, 16:53:47
Hi,
folgendes HTML...
Code Auswählen

<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:
Code Auswählen

.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:
Code Auswählen

<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



FUIP

setstate

#1
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?

Thorsten Pferdekaemper

#2
22 Januar 2019, 21:28:50
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
FUIP

setstate

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

Die line-height Zeile muss also auch noch aus der weather-icons-wind.min.css ausgelöscht werden.

Thorsten Pferdekaemper

#4
22 Januar 2019, 22:13:33
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
FUIP
Drucken
Nach oben Seiten1
Benutzer-Aktionen