Hallo Com,
ich bekomme folgendes einfach nicht hin. Ich habe ein Circle Menu, das wie folgt aussieht...
<td>
<div data-type="circlemenu" class="cell circlemenu">
<ul class="menu">
<li><div data-type="symbol"
data-device="Buero_re"
data-get="pct"
data-get-on='["up","down","open","closed","0","10","20","30","40","50","60","70","80","90","100"]'
data-icons='["oa-fts_shutter_up","oa-fts_shutter_down","oa-fts_window_2w","oa-fts_shutter_100","oa-fts_shutter_100","oa-fts_shutter_90","oa-fts_shutter_80","oa-fts_shutter_70","oa-fts_shutter_60","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-colors='["grey","grey","yellow","green","green","#ebbd05","#ebbd05","#ebbd05","#ebbd05","#ebbd05","#ebbd05","#ebbd05","#ebbd05","#ebbd05","#ebbd05"]'
></div></li>
<li><div data-type="push" data-device="Buero_li" data-set-on="stop" data-icon="fa-angle-stop"></div></li>
<li><div data-type="push" data-device="Buero_li" data-set-on="pct 0" data-icon="fa-angle-down"></div></li>
<li><div data-type="push" data-device="Buero_li" data-set-on="pct 80" data-icon="">80</div></li>
<li><div data-type="push" data-device="Buero_li" data-set-on="pct 60" data-icon="">60</div></li>
<li><div data-type="push" data-device="Buero_li" data-set-on="pct 40" data-icon="">40</div></li>
<li><div data-type="push" data-device="Buero_li" data-set-on="pct 20" data-icon="">20</div></li>
<li><div data-type="push" data-device="Buero_li" data-set-on="pct 100" data-icon="fa-angle-up"></div></li>
</ul>
<!--<div data-type="label" class="top-narrow darker small">Rolladen Links</div>-->
</div>
</td>
Leider ist das Icon recht klein. Ich habe dann versucht vorne ein class="tall" zu setzten,
<td>
<div class="tall">
<div data-type="circlemenu" class="cell circlemenu">
<ul class="menu">
<li><div data-type="symbol"
data-device="Buero_li"
das macht das Icon schön groß, aber auch leider das Circle Menu, was dann in sich zusammen gequetscht ist. (Siehe Bild 2)
Ich hätte gern das große Icon von Bild 1 zusammen mit der Größe des Circle Menus von Bild 3, ist das irgendwie machbar ?
Und noch etwas kann ich ein Icon über ein Icon legen ? Sprich ich würde gerne in der Mitte die Pos des Rollos sehen, was ich momentan habe und die Actionen die der Rollo macht, also z.b. Pfeil nach oben wenn er hochfährt oder ein Pfeil nach unten wenn er runter fährt.
Falls ihr noch mehr Code braucht um das alles im ganzen zu sehen, bitte bescheid sagen.
Grüße
die bigger Class muss auch nur dort hin, wo das Icon größer sein soll. Also zum ersten <li> des Circlemenu, dem mittleren Icon, dann klappt es.
<li data-row="5" data-col="1" data-sizey="2" data-sizex="2">
<header>BigCenter</header>
<div class="center">
<div data-type="circlemenu">
<ul>
<li>
<div class="bigger compress" data-type="symbol" data-device="Buero_re" data-get="pct"
data-get-on='["up","down","open","closed","0","10","20","30","40","50","60","70","80","90","100"]'
data-icons='["oa-fts_shutter_up","oa-fts_shutter_down","oa-fts_window_2w","oa-fts_shutter_100","oa-fts_shutter_100","oa-fts_shutter_90","oa-fts_shutter_80","oa-fts_shutter_70","oa-fts_shutter_60","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-colors='["grey","grey","yellow","green","green","#ebbd05","#ebbd05","#ebbd05","#ebbd05","#ebbd05","#ebbd05","#ebbd05","#ebbd05","#ebbd05","#ebbd05"]'>
</div>
</li>
<li>
<div data-type="push" data-device="Buero_li" data-set-on="stop" data-icon="fa-angle-stop"></div>
</li>
<li>
<div data-type="push" data-device="Buero_li" data-set-on="pct 0" data-icon="fa-angle-down"></div>
</li>
<li>
<div data-type="push" data-device="Buero_li" data-set-on="pct 80" data-icon="">80</div>
</li>
<li>
<div data-type="push" data-device="Buero_li" data-set-on="pct 60" data-icon="">60</div>
</li>
<li>
<div data-type="push" data-device="Buero_li" data-set-on="pct 40" data-icon="">40</div>
</li>
<li>
<div data-type="push" data-device="Buero_li" data-set-on="pct 20" data-icon="">20</div>
</li>
<li>
<div data-type="push" data-device="Buero_li" data-set-on="pct 100" data-icon="fa-angle-up"></div>
</li>
</ul>
<!--<div data-type="label" class="top-narrow darker small">Rolladen Links</div>-->
</div>
</div>
</li>
Zitat von: setstate am 05 Oktober 2019, 11:07:26
die bigger Class muss auch nur dort hin, wo das Icon größer sein soll. Also zum ersten <li> des Circlemenu, dem mittleren Icon, dann klappt es.
<li data-row="5" data-col="1" data-sizey="2" data-sizex="2">
<header>BigCenter</header>
<div class="center">
<div data-type="circlemenu">
<ul>
<li>
<div class="bigger compress" data-type="symbol" data-device="Buero_re" data-get="pct"
data-get-on='["up","down","open","closed","0","10","20","30","40","50","60","70","80","90","100"]'
data-icons='["oa-fts_shutter_up","oa-fts_shutter_down","oa-fts_window_2w","oa-fts_shutter_100","oa-fts_shutter_100","oa-fts_shutter_90","oa-fts_shutter_80","oa-fts_shutter_70","oa-fts_shutter_60","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-colors='["grey","grey","yellow","green","green","#ebbd05","#ebbd05","#ebbd05","#ebbd05","#ebbd05","#ebbd05","#ebbd05","#ebbd05","#ebbd05","#ebbd05"]'>
</div>
</li>
<li>
<div data-type="push" data-device="Buero_li" data-set-on="stop" data-icon="fa-angle-stop"></div>
</li>
<li>
<div data-type="push" data-device="Buero_li" data-set-on="pct 0" data-icon="fa-angle-down"></div>
</li>
<li>
<div data-type="push" data-device="Buero_li" data-set-on="pct 80" data-icon="">80</div>
</li>
<li>
<div data-type="push" data-device="Buero_li" data-set-on="pct 60" data-icon="">60</div>
</li>
<li>
<div data-type="push" data-device="Buero_li" data-set-on="pct 40" data-icon="">40</div>
</li>
<li>
<div data-type="push" data-device="Buero_li" data-set-on="pct 20" data-icon="">20</div>
</li>
<li>
<div data-type="push" data-device="Buero_li" data-set-on="pct 100" data-icon="fa-angle-up"></div>
</li>
</ul>
<!--<div data-type="label" class="top-narrow darker small">Rolladen Links</div>-->
</div>
</div>
</li>
Ich weiß nicht, irgendwas läuft da schief bei mir. So kommt es dann raus, das war auch bei einer meiner Versuche dabei, nur das mittlere Symbol zu vergrößern, aber dann ist das Menu nicht mehr mittig zum Symbol. Oder besser gesagt das Symbol ist dann nicht mehr mittig.
<section>
<div class="big">Rolläden
</div>
<div style="display:inline-block;height:1px;width:80%;background-color:#0088CC;"></div>
<table>
<tr>
<td>
<!--<div class="tall">-->
<div data-type="circlemenu" class="circlemenu">
<ul>
<li><div class="tall"
data-type="symbol"
data-device="Selina"
data-get="state"
data-get-on='["drive-up","drive-down","open","closed","pct-0","pct-10","pct-20","pct-30","pct-40","pct-50","pct-60","pct-70","pct-80","pct-90","pct-100"]'
data-icons='["oa-fts_shutter_up","oa-fts_shutter_down","oa-fts_window_2w","oa-fts_shutter_100","oa-fts_shutter_100","oa-fts_shutter_90","oa-fts_shutter_80","oa-fts_shutter_70","oa-fts_shutter_60","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-colors='["red","red","grey","green","green","#ebbd05","#ebbd05","#ebbd05","#ebbd05","#ebbd05","#ebbd05","#ebbd05","#ebbd05","#ebbd05","#ebbd05"]'
></div></li>
<li><div data-type="push" data-device="Selina" data-set-on="stop" data-icon="fa-angle-stop"></div></li>
<li><div data-type="push" data-device="Selina" data-set-on="pct 0" data-icon="fa-angle-down"></div></li>
<li><div data-type="push" data-device="Selina" data-set-on="pct 80" data-icon="">80</div></li>
<li><div data-type="push" data-device="Selina" data-set-on="pct 60" data-icon="">60</div></li>
<li><div data-type="push" data-device="Selina" data-set-on="pct 40" data-icon="">40</div></li>
<li><div data-type="push" data-device="Selina" data-set-on="pct 20" data-icon="">20</div></li>
<li><div data-type="push" data-device="Selina" data-set-on="pct 100" data-icon="fa-angle-up"></div></li>
</ul>
</div>
</tr>
</table>
</section>
compress mit dazu, wie bei meinem Beispiel
Zitat von: setstate am 05 Oktober 2019, 17:57:36
compress mit dazu, wie bei meinem Beispiel
Ist nun mit drin, aber das gleiche Problem.
<div data-type="circlemenu" class="circlemenu">
<ul>
<li><div class="tall compress"
data-type="symbol"
data-device="Selina"
data-get="state"
data-get-on='["drive-up","drive-down","open","closed","pct-0","pct-10","pct-20","pct-30","pct-40","pct-50","pct-60","pct-70","pct-80","pct-90","pct-100"]'
data-icons='["oa-fts_shutter_up","oa-fts_shutter_down","oa-fts_window_2w","oa-fts_shutter_100","oa-fts_shutter_100","oa-fts_shutter_90","oa-fts_shutter_80","oa-fts_shutter_70","oa-fts_shutter_60","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-colors='["red","red","grey","green","green","#ebbd05","#ebbd05","#ebbd05","#ebbd05","#ebbd05","#ebbd05","#ebbd05","#ebbd05","#ebbd05","#ebbd05"]'
></div></li>
Kann das an einem custom CSS liegen ?
Habe hier eine Variante von Ueberbeck.