HI!
Bei mir werden manche Icons an den Seiten abgeschnitten... Ich finde den Fehler nicht warum... Hat einer eine Idee woran es sein kann?
hier der Code:
<div class="inline top">
<div data-type="weather" data-device="Wetter" data-get="iconAPI" data-imageset="kleinklima" style="width:350px" class=""></div>
<div data-type="label" data-device="Wetter" data-get="condition" class="inline big black bold"></div>
Und im Anhang wie es aussieht...
Habe auch schon verschiedene px werte getestet, class"cell" oder andere Werte bringen auch nix...
Hoffe jemand hat eine Idee...
Vielen Dank!
Vermutlich ist width 350px grösser als die Breite der hbox oder gridster Einheit.
Habe die auch schon viel kleiner gemacht, dann wird aber das Ganze symbol verkleinert.... Abgeschnitten ist es trotzdem...
Kannst Du deine ganze html Datei zur Verfügung stellen?
jup, mache ich heute Abend! ;)
So hier der erste Abschnitt:
Denke das weiter drunter ist nicht notwendig...
<!DOCTYPE html>
<html>
<head>
<script src="js/fhem-tablet-ui.js" defer></script>
</head>
<body data-confirmDelete='0' data-confirmJSError='1' data-addHtmlTitle='1' data-styleData='' data-availableJs='iconSwitch,iconLabel,iconRadio,knob,sortable,fbcalllist,weekprofile,readingsHistory,colorpicker,readingsGroup,uzsu,iconButtons' data-webName='WEB ' style="bg-#000000">
<div class="bg-gray">
<table class="sheet">
<tr>
<td width="30%">
<div class="inline black top right-space">
<div data-type="label" class="top-space-1px bold bigger">Außentemperatur</div>
<div data-type="label" data-device="DOIFTempDurschnitt" data-get="state" data-fix="1" data-limits='[-73,18,25]' data-colors='["cornflowerblue","#00FF00","firebrick"]'
data-unit="%B0C%0A" class="bold" style="font-size:8em;"></div>
<div class="large bold">Luftfeuchtigkeit:</div>
<div data-type="label" data-device="TempAussenEingang" data-get="humidity" data-limits='[0,40,70]' data-colors='["cornflowerblue","green","firebrick"]'
data-unit="%" class="inline bold" style="font-size:4em;"></div>
<!--div data-type="label" class="bigger bold">Carport:</div>
<div data-type="label" data-device="TempAussenCarport" data-get="temperature" data-fix="1" data-limits='[-73,20,23]' data-colors='["cornflowerblue","green","firebrick"]'
data-unit="%B0C%0A" class="bold inline" style="font-size:5em;"></div-->
</div>
</td>
<td width="40%">
<div class="inline top">
<div data-type="weather" data-device="Wetter" data-get="iconAPI" data-imageset="kleinklima" style="width:350px" class=""></div>
<div data-type="label" data-device="Wetter" data-get="condition" class="inline big black bold"></div>
</div>
</td>
<td width="30%">
<div class="inline bigger bold black">
<div class="">Heute</div>
<div data-type="label" data-device="Proplanta" data-get="fc0_tempMin" data-fix="1" data-limits='[-73,18,25]' data-colors='["cornflowerblue","green","firebrick"]'
data-unit="%B0C%0A" class="big inline"></div> -
<div data-type="label" data-device="Proplanta" data-get="fc0_tempMax" data-fix="1" data-limits='[-73,18,25]' data-colors='["cornflowerblue","green","firebrick"]'
data-unit="%B0C%0A" class="big inline"></div>
<div class="">Sonne</div>
<div data-type="label" data-device="Proplanta" data-get="fc0_sun" data-limits='[0,40,80]' data-colors='["firebrick","#aa6900","green"]' data-unit="%"
class="medium inline"></div>
<div class="">Regen</div>
<div data-type="label" data-device="Proplanta" data-get="fc0_chOfRainDay" data-unit="%" data-limits='[0,40,80]' data-colors='["green","#aa6900","firebrick"]'
class="medium inline"></div>
</div>
</td>
</tr>
</table>
<br>
<br>
<div class="inline sheet bold black top-space-1x">
<div class="col-1-3">
<div data-type="label" class="cell top-space normal">MORGENS</div>
<div data-type="weather" data-device="Proplanta" data-get="fc0_weatherMorningIcon" data-imageset="kleinklima" class="inline" style="width:190px"></div>
<div class="inline big" style="text-align:center;vertical-align:bottom">
<div data-type="label" data-device="Proplanta" data-get="fc0_temp06" data-unit="%B0C%0A" class="big" data-limits='[-50,0]' data-colors='["#5858FA","black"]'></div>
</div>
</div>
<div class="col-1-3">
<div data-type="label" class="cell top-space normal">MITTAGS</div>
<div data-type="weather" data-device="Proplanta" data-get="fc0_weatherDayIcon" data-imageset="kleinklima" class="inline" style="width:190px"></div>
<div class="inline big" style="text-align:center;vertical-align:bottom">
<div data-type="label" data-device="Proplanta" data-get="fc0_temp12" data-unit="%B0C%0A" class="big" data-limits='[-50,0]' data-colors='["#5858FA","black"]'></div>
</div>
</div>
<div class="col-1-3">
<div data-type="label" class="cell top-space normal">ABENDS</div>
<div data-type="weather" data-device="Proplanta" data-get="fc0_weatherEveningIcon" data-imageset="kleinklima" class="inline" style="width:190px"></div>
<div class="inline big" style="text-align:center;vertical-align:bottom">
<div data-type="label" data-device="Proplanta" data-get="fc0_temp18" data-unit="%B0C%0A" class="big" data-limits='[-50,0]' data-colors='["#5858FA","black"]'></div>
</div>
</div>
</div>
Das ist der Teil auf dem unteren Bild...
<br>
Hmm Du arbeitest weder mit hbox/vbox noch mit gridster. Dann ist es nicht so dynamisch...
Ich würde width=40% in td und width:350px nicht kombinieren. 40% ist zwar dynamish, aber 350px dagegen nicht.
Was passiert, wenn Du einfach kein width=350px eingibst?
wenn ich das widht:350px raus nehme, dann wird das icon einfach unr kleiner...
Ich denke ich werde diesen Bereich auf hbox/vbox umstellen... und dann mal sehen was passiert
Zitat von: misux am 25 November 2019, 17:11:36
wenn ich das widht:350px raus nehme, dann wird das icon einfach unr kleiner...
Wahrscheinlich ist deine Seite weniger als 875 Pixels breit.
Zum Beispiel mit 700:
Mit td 40% definierst Du eine Spalte mit Breite 280px (700 * 0,4) , und dann willst Du ein Icon mit Breite 350px rein werfen ==> geschnitten
Hmm... das kann eigentlich nicht sein... Ist ein FullHD Display und an den Pixeln der Seite habe ich nichts angepasst...
Aber was auch komisch ist, das andere Symbole komplett dargestellt werden... Bewölkt oder teilweise Sonnig wird korrekt abgebildet...
Habe jetzt einen Bereich auf hbox Vbox umgestellt und manche Icons werde abgeschnitten... Muss das vielleicht so?
<div class="hbox" style="background:black">
<div class="vbox">
<div data-type="label" class="cell top-space normal">MORGENS</div>
<div data-type="label" data-device="Proplanta" data-get="fc0_temp06" data-unit="%B0C%0A" class="big" data-limits='[-50,0]' data-colors='["#5858FA","white"]'></div>
<div data-type="weather" data-device="Proplanta" data-get="fc0_weatherMorningIcon" data-imageset="kleinklima"></div>
</div>
<div class="vbox">
<div data-type="label" class="cell top-space normal">MITTAGS</div>
<div data-type="label" data-device="Proplanta" data-get="fc0_temp12" data-unit="%B0C%0A" class="big" data-limits='[-50,0]' data-colors='["#5858FA","white"]'></div>
<div data-type="weather" data-device="Proplanta" data-get="fc0_weatherDayIcon" data-imageset="kleinklima"></div>
</div>
<div class="vbox">
<div data-type="label" class="cell top-space normal">ABENDS</div>
<div data-type="label" data-device="Proplanta" data-get="fc0_temp18" data-unit="%B0C%0A" class="big" data-limits='[-50,0]' data-colors='["#5858FA","white"]'></div>
<div data-type="weather" data-device="Proplanta" data-get="fc0_weatherEveningIcon" data-imageset="kleinklima"></div>
</div>
</div>
Siehe Bild... Das Linke Icon...
Und was gibt's in den Headers?
Zitat von: misux am 30 November 2019, 17:03:43
[...] manche Icons werde[n] abgeschnitten... Muss das vielleicht so?
[...]
Siehe Bild... Das Linke Icon...
Das muss nicht so, aber es ist so.
Die Ursache ist trivial: Bereits das Bild selbst (haze.png) ist auf der rechten Seite abgeschnitten.
Die Lösung: Die Datei mit einem Bildbearbeitungsprogramm nachbearbeiten, sodass auf der rechten Seite ein fließender Übergang entsteht.
Stimmt! Nutze kleinklima seit Jahren, und das hatte ich noch nie bemerkt!
Also liegt das Problem an den Kleinklima Icons.. Ajajajaj, und ich suche mir einen Wolf seit Wochen... ::)
Okayyy... Nun muss ich herausfinden welche nicht richtig angezeigt werden... Das sind 3,4 Stück... Muss es mal beobachten...
Vielen Dank für eure Unterstützung und Mühe!