TabletUI: Button verschiebt sich

[stobor]

Ich habe einmal angefangen, das TabletUI zu verwenden. Rufe ich meine Seite auf dem iPhone auf, sieht in der Queransicht alles gut aus, aber wenn ich das Gerät drehe, wandert ein Button (circlemenu) aus dem Rahmen heraus (siehe Screenshots anbei).

Hier ein Auszug aus meinem Code:

Code Auswählen Erweitern


<li data-row="1" data-col="5" data-sizex="1" data-sizey="3">
<header>HEIZUNG</header>
<div class="top-space">
<div data-type="circlemenu" class="cell circlemenu" data-item-width="60" data-item-height="60" data-circle-radius="90">
<!-- https://www.youtube.com/watch?v=O5DsCKTNF8c  http://knowthelist.github.io/fhem/tablet/demo_circlemenu.html#link1.html -->
<ul class="menu">
<li><div data-type="push" data-icon="fa-thermometer-full"></div></li>
<li><div data-type="link" data-color="blue" data-url="javascript:go('http://192.168.1.45/config/xmlapi/statechange.cgi?ise_id=2406&new_value=1')">WC</div></li>
<li><div data-type="link" data-color="blue" data-url="javascript:go('http://192.168.1.45/config/xmlapi/statechange.cgi?ise_id=1375&new_value=1')">Flur</div></li>
<li><div data-type="link" data-color="blue" data-url="javascript:go('http://192.168.1.45/config/xmlapi/statechange.cgi?ise_id=2393&new_value=1')">Küche</div></li>
<li><div data-type="link" data-color="blue" data-url="javascript:go('http://192.168.1.45/config/xmlapi/statechange.cgi?ise_id=1793&new_value=1')">Wohnen</div></li>
<li><div data-type="link" data-color="blue" data-url="javascript:go('http://192.168.1.45/config/xmlapi/statechange.cgi?ise_id=1674&new_value=1')">Bad</div></li>
<li><div data-type="link" data-color="blue" data-url="javascript:go('http://192.168.1.45/config/xmlapi/statechange.cgi?ise_id=1761&new_value=1')">Kind</div></li>
<li><div data-type="link" data-color="blue" data-url="javascript:go('http://192.168.1.45/config/xmlapi/statechange.cgi?ise_id=1648&new_value=1')">Schlafen</div></li>
<li><div data-type="link" data-color="blue" data-url="javascript:go('http://192.168.1.45/config/xmlapi/statechange.cgi?ise_id=1787&new_value=1')">Arbeiten</div></li>
</ul>
</div>
</div>
<div class="">Boost</div>

<div class="top-space">
<div data-type="switch"
data-icon="fa-thermometer-three-quarters"
data-url="javascript:go('http://192.168.1.45/config/xmlapi/statechange.cgi?ise_id=1789,2776,2277,2408,1673,2395,2550,1694&new_value=1,1,1,1,1,1,1,1')">
</div>
</div>
<div class="">Comfort</div>


<div class="top-space">
<div data-type="switch"
data-icon="fa-thermometer-half"
data-url="javascript:go('http://192.168.1.45/config/xmlapi/statechange.cgi?ise_id=1785,2772,2273,2404,1679,2391,2546,1692&new_value=1,1,1,1,1,1,1,1')">
</div>
</div>
<div class="">Auto</div>
</li>


Hat jemand eine Idee, wie ich das fixen kann? Habe ich vielleicht den Code falsch aufgebaut?