Hallo
ich versuche gerade in eine 4x1 Box eine 6x2 Tabelle zu quetschen,
aber klappt irgendwie nicht. Hatte einige Sachen ausprobiert.
Der Text ragt immer unten aus der Box raus.
Aktuell sieht der Code so aus:
<li data-row="5" data-col="1" data-sizex="4" data-sizey="1">
<table width="100%" class="">
<tr>
<td><div class="row" data-type="weather" data-device="WetterProplanta" data-get="fc1_weatherDay" data-imageset="kleinklima"> </div></td>
<td><div class="cell" data-type="symbol" data-icon="oa-temp_temperature_min" data-off-color="gray"></div></td>
<td><div class="cell" data-type="symbol" data-icon="oa-temp_temperature_max" data-off-color="gray"></td>
<td><div class="cell" data-type="symbol" data-icon="oa-weather_rain_meter" data-off-color="gray"></td>
<td><div class="cell" data-type="symbol" data-icon="oa-weather_sun" data-off-color="gray"></div></td>
<td><div lass="cell icon" data-type="label">UV</div></td>
</tr>
<tr>
<td><div data-type="label" data-device="WetterProplanta" data-get="fc1_weatherDay" data-imageset="kleinklima" class="left-space right-space"></div> </td>
<td><div class="cell" data-type="label" data-device="WetterProplanta" data-get="fc1_tempMin" data-unit="%B0C%0A"></td>
<td><div class="cell" data-type="symbol" data-icon="oa-temp_temperature_max" data-off-color="gray"></td>
<td><div class="cell" data-type="label" data-device="WetterProplanta" data-get="fc1_chOfRainDay" data-unit="%"></td>
<td><div class="cell" data-type="label" data-device="WetterProplanta" data-get="fc1_sun" data-unit="%"></td>
<td><div class="cell" data-type="label" data-device="WetterProplanta" data-get="fc1_uv" data-limits="[0,5,7,10,100]" data-colors='["#c0ffa0","#f8f040","#f87820","#d80020","#a80080"]'></td>
</tr>
</table>
</li>
Brauche mal einen Tipp von nem HTML/CSS Profi :-)
Ich bin kein Profi! Antworte aber dennoch :P
Ich hatte auch immer Probleme bei der Verwendung von Table und der class cell! Lass die class cell weg div class="" und schau dann mal, dann springt es zumindest nicht über den Rand! (Dann natürlich noch mit div class="small" etc größentechnisch anpassen)
Außerdem wird vielleicht eine Zeile in y-Richtung für die Größe deiner Icons nicht reichen.
Du vermischst mehere Tabellen, wenn Du <table> <tr> <td> mit class=row, class=cell usw mischst.
Versuch mal ohne die HTML Tags, nur mit den classes:
<div class="sheet">
<div class="row">
<div class= "cell" data-type="weather"...</div>
</div>
<div class="row">
<div class="cell" data-type="symbol"...</div>
<div class="cell" data-type="symbol"...</div>
<div class="cell" data-type="symbol"...</div>
</div>
<div class="row">
<div class="cell" data-type="label"...</div>
<div class="cell" data-type="label"...</div>
...
</div>
</div>
Oder ohne die "Tabellen" classes, aber nur mit Html Tags.
Wenn aber die gesamte Widgets in der 4x1 box nicht passen, wirst Du immer noch Probleme haben. Vielleicht musst Du noch die Grösse von den Widgets mit class="small" o.ä. noch anpassen.
Danke, werde ich probieren
Gesendet von meinem GT-I9195 mit Tapatalk
danke, mit class=mini hats geklappt
<li data-row="5" data-col="1" data-sizex="4" data-sizey="1">
<div class="sheet">
<div class="row">
<div class="mini" data-type="weather" data-device="WetterProplanta" data-get="fc1_weatherDay" data-imageset="kleinklima"></div>
<div class="cell" data-type="symbol" data-icon="oa-temp_temperature_min" data-off-color="gray"></div>
<div class="cell" data-type="symbol" data-icon="oa-temp_temperature_max" data-off-color="gray"></div>
<div class="cell" data-type="symbol" data-icon="oa-weather_rain_meter" data-off-color="gray"></div>
<div class="cell" data-type="symbol" data-icon="oa-weather_sun" data-off-color="gray"></div>
<div class="cell icon" data-type="label">UV</div>
</div>
<div class="row">
<div class="cell" data-type="label" data-device="WetterProplanta" data-get="fc1_weatherDay" data-imageset="kleinklima" class="left-space right-space"></div>
<div class="cell" data-type="label" data-device="WetterProplanta" data-get="fc1_tempMin" data-unit="%B0C%0A"></div>
<div class="cell" data-type="symbol" data-icon="oa-temp_temperature_max" data-off-color="gray"></div>
<div class="cell" data-type="label" data-device="WetterProplanta" data-get="fc1_chOfRainDay" data-unit="%"></div>
<div class="cell" data-type="label" data-device="WetterProplanta" data-get="fc1_sun" data-unit="%"></div>
<div class="cell" data-type="label" data-device="WetterProplanta" data-get="fc1_uv" data-limits="[0,5,7,10,100]" data-colors='["#c0ffa0","#f8f040","#f87820","#d80020","#a80080"]'></div>
</div>
</div>
</li>
kann man das vielleicht noch optimieren?
heute ist als Text ein 2-Zeiler, die 2te Zeile ragt raus.
Auch werden die Icons verschoben, so das diese leider
nicht mehr untereinander sind.
Ist das Icon in der 2. Zeile auch auf class=mini?
Ja, der code ist bei allen 3 gleich
Gesendet von meinem GT-I9195 mit Tapatalk
hier mal der code:
<li data-row="4" data-col="5" data-sizex="4" data-sizey="1">
<header><div data-type="label" data-device="WetterProplanta" data-get="fc1_date" data-substitution="toDate().ee()" class="darker big"></div></header>
<div class="sheet">
<div class="row">
<div class="mini" data-type="weather" data-device="WetterProplanta" data-get="fc1_weatherDay" data-imageset="kleinklima"></div>
<div class="cell" data-type="symbol" data-icon="oa-temp_temperature_min" data-off-color="gray"></div>
<div class="cell" data-type="symbol" data-icon="oa-temp_temperature_max" data-off-color="gray"></div>
<div class="cell" data-type="symbol" data-icon="oa-weather_rain_meter" data-off-color="gray"></div>
<div class="cell" data-type="symbol" data-icon="oa-weather_sun" data-off-color="gray"></div>
<div class="cell icon" data-type="label">UV</div>
</div>
<div class="row">
<div class="cell" data-type="label" data-device="WetterProplanta" data-get="fc1_weatherDay" data-imageset="kleinklima" class="left-space right-space"></div>
<div class="cell" data-type="label" data-device="WetterProplanta" data-get="fc1_tempMin" data-unit="%B0C%0A"></div>
<div class="cell" data-type="label" data-device="WetterProplanta" data-get="fc1_tempMax" data-unit="%B0C%0A"></div>
<div class="cell" data-type="label" data-device="WetterProplanta" data-get="fc1_chOfRainDay" data-unit="%"></div>
<div class="cell" data-type="label" data-device="WetterProplanta" data-get="fc1_sun" data-unit="%"></div>
<div class="cell" data-type="label" data-device="WetterProplanta" data-get="fc1_uv" data-limits="[0,5,7,10,100]" data-colors='["#c0ffa0","#f8f040","#f87820","#d80020","#a80080"]'></div>
</div>
</div>
</li>
<li data-row="5" data-col="5" data-sizex="4" data-sizey="1">
<header><div data-type="label" data-device="WetterProplanta" data-get="fc2_date" data-substitution="toDate().ee()" class="darker big"></div></header>
<div class="sheet">
<div class="row">
<div class="mini" data-type="weather" data-device="WetterProplanta" data-get="fc2_weatherDay" data-imageset="kleinklima"></div>
<div class="cell" data-type="symbol" data-icon="oa-temp_temperature_min" data-off-color="gray"></div>
<div class="cell" data-type="symbol" data-icon="oa-temp_temperature_max" data-off-color="gray"></div>
<div class="cell" data-type="symbol" data-icon="oa-weather_rain_meter" data-off-color="gray"></div>
<div class="cell" data-type="symbol" data-icon="oa-weather_sun" data-off-color="gray"></div>
<div class="cell icon" data-type="label">UV</div>
</div>
<div class="row">
<div class="cell" data-type="label" data-device="WetterProplanta" data-get="fc2_weatherDay" data-imageset="kleinklima" class="left-space right-space"></div>
<div class="cell" data-type="label" data-device="WetterProplanta" data-get="fc2_tempMin" data-unit="%B0C%0A"></div>
<div class="cell" data-type="label" data-device="WetterProplanta" data-get="fc2_tempMax" data-unit="%B0C%0A"></div>
<div class="cell" data-type="label" data-device="WetterProplanta" data-get="fc2_chOfRainDay" data-unit="%"></div>
<div class="cell" data-type="label" data-device="WetterProplanta" data-get="fc2_sun" data-unit="%"></div>
<div class="cell" data-type="label" data-device="WetterProplanta" data-get="fc2_uv" data-limits="[0,5,7,10,100]" data-colors='["#c0ffa0","#f8f040","#f87820","#d80020","#a80080"]'></div>
</div>
</div>
</li>
<li data-row="6" data-col="5" data-sizex="4" data-sizey="1">
<header><div data-type="label" data-device="WetterProplanta" data-get="fc3_date" data-substitution="toDate().ee()" class="darker big"></div></header>
<div class="sheet">
<div class="row">
<div class="mini" data-type="weather" data-device="WetterProplanta" data-get="fc3_weatherDay" data-imageset="kleinklima"></div>
<div class="cell" data-type="symbol" data-icon="oa-temp_temperature_min" data-off-color="gray"></div>
<div class="cell" data-type="symbol" data-icon="oa-temp_temperature_max" data-off-color="gray"></div>
<div class="cell" data-type="symbol" data-icon="oa-weather_rain_meter" data-off-color="gray"></div>
<div class="cell" data-type="symbol" data-icon="oa-weather_sun" data-off-color="gray"></div>
<div class="cell icon" data-type="label">UV</div>
</div>
<div class="row">
<div class="cell" data-type="label" data-device="WetterProplanta" data-get="fc3_weatherDay" data-imageset="kleinklima" class="left-space right-space"></div>
<div class="cell" data-type="label" data-device="WetterProplanta" data-get="fc3_tempMin" data-unit="%B0C%0A"></div>
<div class="cell" data-type="label" data-device="WetterProplanta" data-get="fc3_tempMax" data-unit="%B0C%0A"></div>
<div class="cell" data-type="label" data-device="WetterProplanta" data-get="fc3_chOfRainDay" data-unit="%"></div>
<div class="cell" data-type="label" data-device="WetterProplanta" data-get="fc3_sun" data-unit="%"></div>
<div class="cell" data-type="label" data-device="WetterProplanta" data-get="fc3_uv" data-limits="[0,5,7,10,100]" data-colors='["#c0ffa0","#f8f040","#f87820","#d80020","#a80080"]'></div>
</div>
</div>
</li
habs nun hingebogen
"Spalte" über css bzw style auf 200px begrenzt
noxx
Könnest du mir genauer erklären wie du es geändert hast. Danke
noxx ,
Könntest du mir bitte erklären was du wo geändert oder eingesetzt hast um das hinzubekommen. Ich versuche es grade umzusetzen, weiß aber leider überhaupt nicht wie ich das umsetzen muss.
Danke schonmal im voraus, oder vielleicht kann mir das ja auch jemand anderes erklären.
Gruß
Zitat"Spalte" über css bzw style auf 200px begrenzt
Ich vermute er hat etwas so eingebaut:
<div class="cell" style="width:200px" data-type=...
jo
<li data-row="4" data-col="5" data-sizex="4" data-sizey="1">
<header><div data-type="label" data-device="WetterProplanta" data-get="fc1_date" data-substitution="toDate().ee()" class="darker big"></div></header>
<div class="sheet">
<div class="row">
<div class="mini" data-type="weather" data-device="WetterProplanta" data-get="fc1_weatherDay" data-imageset="kleinklima" style="width: 200px"></div>
<div class="cell" data-type="symbol" data-icon="oa-temp_temperature_min" data-off-color="gray"></div>
<div class="cell" data-type="symbol" data-icon="oa-temp_temperature_max" data-off-color="gray"></div>
<div class="cell" data-type="symbol" data-icon="oa-weather_rain_meter" data-off-color="gray"></div>
<div class="cell" data-type="symbol" data-icon="oa-weather_sun" data-off-color="gray"></div>
<div class="cell icon" data-type="label">UV</div>
</div>
<div class="row">
<div class="cell" data-type="label" data-device="WetterProplanta" data-get="fc2_weatherDay" data-imageset="kleinklima" class="left-space right-space" style="width: 200px"></div>
<div class="cell" data-type="label" data-device="WetterProplanta" data-get="fc1_tempMin" data-unit="%B0C%0A"></div>
<div class="cell" data-type="label" data-device="WetterProplanta" data-get="fc1_tempMax" data-unit="%B0C%0A"></div>
<div class="cell" data-type="label" data-device="WetterProplanta" data-get="fc1_chOfRainDay" data-unit="%"></div>
<div class="cell" data-type="label" data-device="WetterProplanta" data-get="fc1_sun" data-unit="%"></div>
<div class="cell" data-type="label" data-device="WetterProplanta" data-get="fc1_uv" data-limits="[0,5,7,10,100]" data-colors='["#c0ffa0","#f8f040","#f87820","#d80020","#a80080"]'></div>
</div>
</div>
</li>
Danke für die Erklärung