Zellhöhe begrenzen

[noxx]

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:

Code Auswählen Erweitern

<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

[MKeY]

Ich bin kein Profi! Antworte aber dennoch 
Ich hatte auch immer Probleme bei der Verwendung von Table und der class cell! Lass die class cell weg

Code Auswählen Erweitern

div class="" und schau dann mal, dann springt es zumindest nicht über den Rand! (Dann natürlich noch mit

Code Auswählen Erweitern

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.

[amenomade]

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:

Code Auswählen Erweitern

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

[noxx]

Danke, werde ich probieren

Gesendet von meinem GT-I9195 mit Tapatalk

[noxx]

danke, mit class=mini hats geklappt

Code Auswählen Erweitern

<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>


[noxx]

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.

[amenomade]

Ist das Icon in der 2. Zeile auch auf class=mini?

[noxx]

Ja, der code ist bei allen 3 gleich

Gesendet von meinem GT-I9195 mit Tapatalk

[noxx]

hier mal der code:

Code Auswählen Erweitern

<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

[noxx]

habs nun hingebogen

"Spalte" über css bzw style auf 200px begrenzt

[Octopus180]

noxx

Könnest du mir genauer erklären wie du es geändert hast. Danke

[Octopus180]

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ß

[amenomade]

"Spalte" über css bzw style auf 200px begrenzt

Ich vermute er hat etwas so eingebaut:

Code Auswählen Erweitern

<div class="cell" style="width:200px" data-type=...

[noxx]

jo

Code Auswählen Erweitern

<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>

[Octopus180]

Danke für die Erklärung