circlemenu // zwei nebeneinander

[Dr_Prune]

Hallo,

wahrscheinlich ein blöder Anfängerfehler, aber es gelingt mir nicht, zwei (oder gflls mehr) circlemenus nebeneinander darzustellen. Die landen immer untereinander und sprengen das Layout, egal mit welcher div Klasse ich das zu klammern versuche, row, inline, mit col 1-2 oder ohne.

Könnt ihr euch mal den Code ansehen, bitte?

Code Auswählen Erweitern


<li data-row="9" data-col="2" data-sizex="5" data-sizey="2">
    <header>Jalousien</header>
    <div class="row">
      <div class="col 1-2">
        <div class="top-space" data-type="circlemenu" data-direction="top-half">
          <ul>
            <li><div data-type="symbol"
                data-device="s_OG_jalousie"
                data-get="statePosition"
                data-states='["closed","[0-9]","1[0-9]","2[0-9]","3[0-9]","4[0-9]","5[0-9]","6[0-9]","7[0-9]","8[0-9]","9[0-9]","100"]'
                data-icons='["oa-fts_shutter_up","oa-fts_shutter_down","oa-fts_shutter_10","oa-fts_shutter_20","oa-fts_shutter_30","oa-fts_shutter_40","oa-fts_shutter_50","oa-fts_shutter_60","oa-fts_shutter_70","oa-fts_shutter_80","oa-fts_shutter_90","oa-fts_shutter_100"]'
                data-colors='["green","yellow","yellow","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050"]'></div></li>
            <li><div data-type="push"
                  data-device="s_OG_jalousie"
                  data-set-on="on"
                  data-icon="fa-angle-down"></div></li>
            <li><div data-type="push"
                  data-device="s_OG_jalousie"
                  data-set-on="off-for-timer 1.5"
                  data-icon="oa-fts_blade_arc_close_00"></div></li>
            <li><div data-type="push"
                  data-device="s_OG_jalousie"
                  data-set-on="go-my"
                  data-icon="oa-audio_stop"></div></li>
            <li><div data-type="push"
                  data-device="s_OG_jalousie"
                  data-set-on="on-for-timer 1.5"
                  data-icon="oa-fts_blade_arc_close_100"></div></li>
            <li><div data-type="push"
                  data-device="s_OG_jalousie"
                  data-set-on="off"
                  data-icon="fa-angle-up"></div></li>
          </ul>
        </div>
        <div data-type="label">Alle OG</div>
      </div>
      <div class="col 1-2">
        <div class="top-space" data-type="circlemenu" data-direction="top-half">
          <ul>
            <li><div data-type="symbol"
                data-device="s_EG_jalousie"
                data-get="statePosition"
                data-states='["closed","[0-9]","1[0-9]","2[0-9]","3[0-9]","4[0-9]","5[0-9]","6[0-9]","7[0-9]","8[0-9]","9[0-9]","100"]'
                data-icons='["oa-fts_shutter_up","oa-fts_shutter_down","oa-fts_shutter_10","oa-fts_shutter_20","oa-fts_shutter_30","oa-fts_shutter_40","oa-fts_shutter_50","oa-fts_shutter_60","oa-fts_shutter_70","oa-fts_shutter_80","oa-fts_shutter_90","oa-fts_shutter_100"]'
                data-colors='["green","yellow","yellow","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050"]'></div></li>
            <li><div data-type="push"
                  data-device="s_EG_jalousie"
                  data-set-on="on"
                  data-icon="fa-angle-down"></div></li>
            <li><div data-type="push"
                  data-device="s_EG_jalousie"
                  data-set-on="off-for-timer 1.5"
                  data-icon="oa-fts_blade_arc_close_00"></div></li>
            <li><div data-type="push"
                  data-device="s_EG_jalousie"
                  data-set-on="go-my"
                  data-icon="oa-audio_stop"></div></li>
            <li><div data-type="push"
                  data-device="s_EG_jalousie"
                  data-set-on="on-for-timer 1.5"
                  data-icon="oa-fts_blade_arc_close_100"></div></li>
            <li><div data-type="push"
                  data-device="s_EG_jalousie"
                  data-set-on="off"
                  data-icon="fa-angle-up"></div></li>
          </ul>
        </div>
        <div data-type="label">Alle EG</div>
      </div>
    </div>
  </li>


[forum-merlin]

Hi, das funktioniert per "inline"
Steht auch hier:
https://wiki.fhem.de/wiki/FHEM_Tablet_UI/FAQ#Wie_bekommt_man_Elemente_nebeneinander_und_.C3.BCbereinander.3F


Hab mal Deinen Code bissl angepasst:

Code Auswählen Erweitern


<li data-row="1" data-col="1" data-sizex="5" data-sizey="3">
    <header>Jalousien</header>
    <div class="inline">
      <div class="inline" data-type="circlemenu" data-direction="top-half">
          <ul>
            <li><div data-type="symbol"
                data-device="s_OG_jalousie"
                data-get="statePosition"
                data-states='["closed","[0-9]","1[0-9]","2[0-9]","3[0-9]","4[0-9]","5[0-9]","6[0-9]","7[0-9]","8[0-9]","9[0-9]","100"]'
                data-icons='["oa-fts_shutter_up","oa-fts_shutter_down","oa-fts_shutter_10","oa-fts_shutter_20","oa-fts_shutter_30","oa-fts_shutter_40","oa-fts_shutter_50","oa-fts_shutter_60","oa-fts_shutter_70","oa-fts_shutter_80","oa-fts_shutter_90","oa-fts_shutter_100"]'
                data-colors='["green","yellow","yellow","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050"]'></div></li>
            <li><div data-type="push"
                  data-device="s_OG_jalousie"
                  data-set-on="on"
                  data-icon="fa-angle-down"></div></li>
            <li><div data-type="push"
                  data-device="s_OG_jalousie"
                  data-set-on="off-for-timer 1.5"
                  data-icon="oa-fts_blade_arc_close_00"></div></li>
            <li><div data-type="push"
                  data-device="s_OG_jalousie"
                  data-set-on="go-my"
                  data-icon="oa-audio_stop"></div></li>
            <li><div data-type="push"
                  data-device="s_OG_jalousie"
                  data-set-on="on-for-timer 1.5"
                  data-icon="oa-fts_blade_arc_close_100"></div></li>
            <li><div data-type="push"
                  data-device="s_OG_jalousie"
                  data-set-on="off"
                  data-icon="fa-angle-up"></div></li>
          </ul>
        </div>
        <div data-type="label">Alle OG</div>
      </div>
      <div class="inline">
        <div class="inline" data-type="circlemenu" data-direction="top-half">
          <ul>
            <li><div data-type="symbol"
                data-device="s_EG_jalousie"
                data-get="statePosition"
                data-states='["closed","[0-9]","1[0-9]","2[0-9]","3[0-9]","4[0-9]","5[0-9]","6[0-9]","7[0-9]","8[0-9]","9[0-9]","100"]'
                data-icons='["oa-fts_shutter_up","oa-fts_shutter_down","oa-fts_shutter_10","oa-fts_shutter_20","oa-fts_shutter_30","oa-fts_shutter_40","oa-fts_shutter_50","oa-fts_shutter_60","oa-fts_shutter_70","oa-fts_shutter_80","oa-fts_shutter_90","oa-fts_shutter_100"]'
                data-colors='["green","yellow","yellow","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050"]'></div></li>
            <li><div data-type="push"
                  data-device="s_EG_jalousie"
                  data-set-on="on"
                  data-icon="fa-angle-down"></div></li>
            <li><div data-type="push"
                  data-device="s_EG_jalousie"
                  data-set-on="off-for-timer 1.5"
                  data-icon="oa-fts_blade_arc_close_00"></div></li>
            <li><div data-type="push"
                  data-device="s_EG_jalousie"
                  data-set-on="go-my"
                  data-icon="oa-audio_stop"></div></li>
            <li><div data-type="push"
                  data-device="s_EG_jalousie"
                  data-set-on="on-for-timer 1.5"
                  data-icon="oa-fts_blade_arc_close_100"></div></li>
            <li><div data-type="push"
                  data-device="s_EG_jalousie"
                  data-set-on="off"
                  data-icon="fa-angle-up"></div></li>
          </ul>
        </div>
        <div data-type="label">Alle EG</div>
      </div>
    </div>
  </li>

Viel Spass Beim Basteln!

[Dr_Prune]

Perfekt, danke!

Wär ich nicht drauf gekommen, dass zwei <div class="inline"> hintereinander notwendig sind. Muss man das verstehen?

Grüße