TabletUI: circlemenue teilweise verdeckt

[stobor]

Hallo,ich nutze die CircleMenu Funktion:

Code Auswählen Erweitern

<li data-row="5" data-col="2" data-sizey="1" data-sizex="1">
<div>
<div data-type="switch"
data-device="switchSummerOff"
data-icons='["oa-secur_alarm","oa-secur_alarm"]'
data-colors='["#505050","#505050"]'
data-set-states='["off","off"]'
data-states='["on","off"]'
data-background-colors='["#2a2a2a", "#2a2a2a"]'
class="display-topcenter tall">
</div>
<div data-type="label"
class="display-bottomcenter big">AlarmSummer aus
</div>
</div>
</li>

<li data-row="5" data-col="3" data-sizey="1" data-sizex="1">

<div>
<div data-type="circlemenu" class="cell circlemenu display-topcenter bigger" data-item-diameter="150" data-circle-radius="150" >
<!-- https://www.youtube.com/watch?v=O5DsCKTNF8c  http://knowthelist.github.io/fhem/tablet/demo_circlemenu.html#link1.html -->
<ul>
<li><div data-type="push" data-icon="fa-thermometer-full"></div></li>
<li><div class="big" data-type="link" data-color="white" data-url="javascript:go('myURL=2306&new_value=1')">WC</div></li>
<li><div class="big" data-type="link" data-color="white" data-url="javascript:go('myURL=1275&new_value=1')">Flur</div></li>
<li><div class="big"  data-type="link" data-color="white" data-url="javascript:go('myURL=2193&new_value=1')">Küche</div></li>
<li><div class="big"  data-type="link" data-color="white" data-url="javascript:go('myURL=1493&new_value=1')">Wohnen</div></li>
<li><div class="big"  data-type="link" data-color="white" data-url="javascript:go('myURL=1774&new_value=1')">Bad</div></li>
<li><div class="big"  data-type="link" data-color="white" data-url="javascript:go('myURL=1661&new_value=1')">Kind</div></li>
<li><div class="big"  data-type="link" data-color="white" data-url="javascript:go('myURL=1548&new_value=1')">Schlafen</div></li>
<li><div class="big"  data-type="link" data-color="white" data-url="javascript:go('myURL=1887&new_value=1')">Arbeiten</div></li>
</ul>
</div>
<div data-type="label"
class="display-bottomcenter big">Boost
</div>
</div>

</li>

<li data-row="5" data-col="4" data-sizey="1" data-sizex="1">
<div>
<div data-type="switch"
data-device="switchSummerOff"
data-icons='["oa-secur_alarm","oa-secur_alarm"]'
data-colors='["#505050","#505050"]'
data-set-states='["off","off"]'
data-states='["on","off"]'
data-background-colors='["#2a2a2a", "#2a2a2a"]'
class="display-topcenter tall">
</div>
<div data-type="label"
class="display-bottomcenter big">AlarmSummer aus
</div>
</div>
</li>


Jetzt wird allerdings das geöffnete KreisMenü vom rechts daneben liegenden Widget überdeckt - siehe Screenshot anbei.
Mich wundert, dass sich der geöffnete Kreis über das linke Widget legt, aber nicht über das rechts daneben liegende.
Wie bekomme ich es hin, dass das Kreismenü komplett im Vordergrund liegt?


Auch wenn ich bspw. Icons anstatt Text verwende, passiert das Gleiche:

Code Auswählen Erweitern

<ul>
<li><div data-type="push" data-icon="fa-thermometer-full"></div></li>
<li><div data-icon="mi-wc" data-type="link" data-color="white" data-url="javascript:go('myURL=2306&new_value=1')"></div></li><!--WC-->
<li><div data-icon="fs-floor" data-type="link" data-color="white" data-url="javascript:go('myURL=1275&new_value=1')"></div></li><!--Flur-->
<li><div data-icon="fs-hue_room_kitchen" data-type="link" data-color="white" data-url="javascript:go('myURL=2193&new_value=1')"></div></li><!--Küche-->
<li><div data-icon="fs-hue_room_living" data-type="link" data-color="white" data-url="javascript:go('myURL=1493&new_value=1')"></div></li><!--Wohnen-->
<li><div data-icon="fa-bath" data-type="link" data-color="white" data-url="javascript:go('myURL=1774&new_value=1')"></div></li><!--Bad-->
<li><div data-icon="oa-scene_childs_room" data-type="link" data-color="white" data-url="javascript:go('myURL=1661&new_value=1')"></div></li><!--Kind-->
<li><div data-icon="oa-scene_sleeping" data-type="link" data-color="white" data-url="javascript:go('myURL=1548&new_value=1')"></div></li><!--Schlafen-->
<li><div data-icon="oa-light_office" data-type="link" data-color="white" data-url="javascript:go('myURL=1887&new_value=1')"></div></li><!--Arbeiten-->
</ul>


Außerdem wundert mich, dass diese Icons zunächst deaktiviert scheinen (sie sind nicht weiß, sondern hell-grau). Ich muss sie zunächst einmal anklicken. Dann werden sie weiß. Und nach einem erneuten Anklicken lösen sie ihre Aktion aus. Idee?

Danke für eure Hilfe.

[roelleke]

Hallo,
ich habe jetzt das gleiche Problem.
Gibt es hier vielleicht schon eine Lösung?