[gelöst] 2 werte Nebenienader UND mittig ausgerichtet

[Tobias]

Hi,
mit der klasse inline bekkomme ich ja 2 werte nebeneinander, aber ldier kleben Sie im unteren Rand und sind nicht mittag ausgerichtet.

In meinem Haupt-Feld (3 felder breit, Basis das Beispiel index.html)) möchte ich 4 Werte haben
Thermostat, Klasse "left"
Klasse "inline": symbol, circlemenu
Klasse: "right": Symbol

[setstate]

"left" und "right" würde ich nur benutzen bei max zwei Elementen.
Bei vier nimm nur vier mal "inline", ohne "left" und "right".

Wenn das nicht klappt, hänge mal den Teil des Codes hier an. Dann schauen wir uns das an.

[Roman]

Hallo,

ich hatte auch Probleme mit der Ausrichtung von Elementen und bin dazu übergegangen immer wenn ich mehr als 2 Elemente plazieren muss, diese in eine Tabelle zu packen, das klappt bei mir immer ohne Probleme.


Gruß
Roman

[kvo1]

versuch mal:

doublebox-h
bzw.
triplebox-h

[setstate]

Oder du nimmst 4 mal "col-1-4", dann ist der Platz in 25% Bereiche geteilt. Kann man auch mit verschiedenen col-x-y Classes mixen, wenn man darauf achtet, dass man am Ende < 100% bleibt.

[Tobias]

So siehts aus Bin ratlos...
alles geändert auf Inline. Basis ist das Example index.html

Code Auswählen Erweitern


<li data-row="1" data-col="2" data-sizex="3" data-sizey="1">
        <header>BAD</header>
<div class="inline">
        <div data-type="thermostat" data-device="HZ_Bad_Clima" data-valve="ValvePosition"></div>
</div>
<div class="inline">
        <div data-type="symbol" data-device="RL_OG_Bad" data-get="level"
       data-icons='["oa-fts_shutter_90","oa-fts_shutter_80","oa-fts_shutter_70","oa-fts_shutter_60","oa-fts_shutter_50",
            "oa-fts_shutter_50","oa-fts_shutter_40","oa-fts_shutter_30","oa-fts_shutter_20",
        "oa-fts_shutter_10","oa-fts_window_2w"]'
       data-get-on='["0","10","20","30","40","50","60","70","80","90","100"]' data-on-color="#2A2A2A"
       data-on-background-color="#aa6900" data-background-icon="fa-circle">
        </div>
</div>
<div class="inline">
                <div data-type="circlemenu" data-direction="bottom-half" data-circle-radius="90" data-item-diameter="67" style="font-size:130%">
                   <ul class="menu">
                     <li> <div data-type="push" data-icon="fa-bars"></div></li>
                     <li> <div data-type="push" data-device="RL_OG_Bad" data-icon="fa-angle-double-up" data-set-on="on"></div></li>
                     <li> <div data-type="push" data-device="RL_OG_Bad" data-icon="fa-angle-up"  data-set-on="pct 80"></div></li>
                     <li> <div data-type="push" data-device="RL_OG_Bad" data-icon="fa-minus"  data-set-on=""></div></li>
                     <li> <div data-type="push" data-device="RL_OG_Bad" data-icon="fa-angle-down" data-set-on="pct 10"></div></li>
                     <li> <div data-type="push" data-device="RL_OG_Bad" data-icon="fa-angle-double-down" data-set-on="off"></div></li>
                   </ul>
                </div>
</div>
<div class="inline">
               <div data-type="symbol" data-device="WW_EG_EZ_Griff"
                   data-get-on='["open","tilted","closed"]'
                   data-icons='["fa-windows","fa-windows","fa-windows"]'
                   data-on-colors='["SeaGreen","SlateBlue","IndianRed"]'
                   class="narrow">
                </div>
                <div data-type="label" class="narrow darker small">Fenster</div>
</div>
</li>

[Roman]

Hallo Tobias,

probiers mal mit einer Tabelle, funktioniert bei mir ohne Probleme, innerhalb einer Tabellenzelle kannst du dann auch noch positionieren.
Ich hab deinen Code mal um die Tabelle erweitert, hab's nicht getestet, sollte aber klappen.

Code Auswählen Erweitern

<li data-row="1" data-col="2" data-sizex="3" data-sizey="1">
        <header>BAD</header>
<table><tr>
<td<
        <div data-type="thermostat" data-device="HZ_Bad_Clima" data-valve="ValvePosition"></div>
</td><td>
        <div data-type="symbol" data-device="RL_OG_Bad" data-get="level"
       data-icons='["oa-fts_shutter_90","oa-fts_shutter_80","oa-fts_shutter_70","oa-fts_shutter_60","oa-fts_shutter_50",
            "oa-fts_shutter_50","oa-fts_shutter_40","oa-fts_shutter_30","oa-fts_shutter_20",
        "oa-fts_shutter_10","oa-fts_window_2w"]'
       data-get-on='["0","10","20","30","40","50","60","70","80","90","100"]' data-on-color="#2A2A2A"
       data-on-background-color="#aa6900" data-background-icon="fa-circle">
</div>
</td><td>
                <div data-type="circlemenu" data-direction="bottom-half" data-circle-radius="90" data-item-diameter="67" style="font-size:130%">
                   <ul class="menu">
                     <li> <div data-type="push" data-icon="fa-bars"></div></li>
                     <li> <div data-type="push" data-device="RL_OG_Bad" data-icon="fa-angle-double-up" data-set-on="on"></div></li>
                     <li> <div data-type="push" data-device="RL_OG_Bad" data-icon="fa-angle-up"  data-set-on="pct 80"></div></li>
                     <li> <div data-type="push" data-device="RL_OG_Bad" data-icon="fa-minus"  data-set-on=""></div></li>
                     <li> <div data-type="push" data-device="RL_OG_Bad" data-icon="fa-angle-down" data-set-on="pct 10"></div></li>
                     <li> <div data-type="push" data-device="RL_OG_Bad" data-icon="fa-angle-double-down" data-set-on="off"></div></li>
                   </ul>
                </div>
</td><td>
               <div data-type="symbol" data-device="WW_EG_EZ_Griff"
                   data-get-on='["open","tilted","closed"]'
                   data-icons='["fa-windows","fa-windows","fa-windows"]'
                   data-on-colors='["SeaGreen","SlateBlue","IndianRed"]'
                   class="narrow">
                <div data-type="label" class="narrow darker small">Fenster</div>
</div>
</td></tr></table>
</li>

Gruß
Roman

[Tobias]

mit etwas herumprobieren hab ich es jetzt so:

Code Auswählen Erweitern


<li data-row="1" data-col="2" data-sizex="3" data-sizey="1">
   <header>BAD</header>
   <table border=0><tr>
      <td width="30%">
        <div data-type="thermostat" data-device="HZ_Bad_Clima" data-valve="ValvePosition"></div>
      </td>
      <td width="25%">
        <div data-type="symbol" data-device="RL_OG_Bad" data-get="level"
           data-icons='["oa-fts_shutter_90","oa-fts_shutter_80","oa-fts_shutter_70","oa-fts_shutter_60","oa-fts_shutter_50",
            "oa-fts_shutter_50","oa-fts_shutter_40","oa-fts_shutter_30","oa-fts_shutter_20",
            "oa-fts_shutter_10","oa-fts_window_2w"]'
           data-get-on='["0","10","20","30","40","50","60","70","80","90","100"]' data-on-color="#2A2A2A"
           data-on-background-color="#aa6900" data-background-icon="fa-circle">
        </div>
      </td>
      <td width="25%">
        <div data-type="circlemenu" data-direction="bottom-half" data-circle-radius="90" data-item-diameter="67" style="font-size:130%" class="top-narro$
           <ul class="menu">
              <li> <div data-type="push" data-icon="fa-bars"></div></li>
              <li> <div data-type="push" data-device="RL_OG_Bad" data-icon="fa-angle-double-up" data-set-on="on"></div></li>
              <li> <div data-type="push" data-device="RL_OG_Bad" data-icon="fa-angle-up"  data-set-on="pct 80"></div></li>
              <li> <div data-type="push" data-device="RL_OG_Bad" data-icon="fa-minus"  data-set-on=""></div></li>
              <li> <div data-type="push" data-device="RL_OG_Bad" data-icon="fa-angle-down" data-set-on="pct 10"></div></li>
              <li> <div data-type="push" data-device="RL_OG_Bad" data-icon="fa-angle-double-down" data-set-on="off"></div></li>
           </ul>
        </div>
      </td>
      <td width="20%">
        <div data-type="symbol" data-device="WW_EG_EZ_Griff"
           data-get-on='["open","tilted","closed"]'
           data-icons='["fa-windows","fa-windows","fa-windows"]'
           data-on-colors='["SeaGreen","SlateBlue","IndianRed"]'
           class="top-narrow-2x">
        </div>
        <div data-type="label"
           class="narrow darker small">Fenster
        </div>
      </td>
      </tr>
   </table>
</li>

Ist es eigentlich möglich das der Button zum CircleMenü mein Symbol links daneben ist? Soll heißen, tippe ich auf den roten Fensterpunkt, geht mein circlemenü auf. Dann würde ich eine Spalte sparen

[Roman]

Hallo Tobias,

ich habs jetzt direkt nicht probiert, aber mach bei deinem Circlemenu als erstes Element ein Symbol anstatt ein push.
Also einfach dein Symbol-Type (Spalte2) als 1 Element der Menu-Liste einfügen.

Ich habe für meine Rollos ein Element 'Circleborder' als erstes Listenelement, hier wird der Stand als % Zahl angezeigt und gleichzeitig ein 'Fortschrittsbalken' als Ring. das sollte auch mit einem Symbol funktionieren.

Code Auswählen Erweitern

       <ul class="menu">
     <li class="circleborder"><div data-type="progress" data-device="Rollo_Speisekammer" data-get="pct"></div></li>
.....
</ul>

Gruß
Roman

[Tobias]

FUNKTIONIERT Danke...
Damit ist das Thema für mich geschlossen. Für die anderen Sachen mache ich ein eigenen Thema auf...