FTUI Popup - circlemenu im popup - circle an popuprand abgeschnitten

[klinkone]

Hallo,

ich habe mehrere circlemenu einer Rolladensteuerung in ein popup gepackt.

Problem ist das beim öffnen des circlemenu im popup der circle am Rand des popup abgeschnitten wird und nicht darüber hinaus dargestellt wird.
Das passiert an allen Rändern.

Code Auswählen Erweitern


<li class="container round" data-row="2" data-col="3" data-sizex="1" data-sizey="1">
<div data-type="popup" data-mode="fade" data-height="200px" data-width="1200px">
  <div data-type="button" data-icon="oa-fts_shutter" class="large top-space-2"></div>
<div class="bold">Rolläden EG</div>
<div class="dialog">
<header class="container round">Rolläden Erdgeschoß</header>

<div class="sheet top-space">
<div class="row">
<div class="col-1-8">
<div class="container">
<div data-type="circlemenu" data-direction="bottom-half" class="circlemenu noshade keepopen">
<ul class="top-space">
<li>
<div data-type="symbol"
data-device="RL_EG_AZ_1"
data-get="state"
data-states='["drive-up","drive-down","open","closed","half","pct-[0-9]","pct-1[0-9]","pct-2[0-9]","pct-3[0-9]","pct-4[0-9]","pct-5[0-9]","pct-6[0-9]","pct-7[0-9]","pct-8[0-9]","pct-9[0-9]","pct-100"]'
data-icons='["oa-fts_shutter_up","oa-fts_shutter_down","oa-fts_window_2w","oa-fts_shutter_100","oa-fts_shutter","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='["yellow","yellow","green","green","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050"]'>
</div>
</li>
<li>
<div data-type="push"
data-device="RL_EG_AZ_1"
data-set-on="open"
data-icon="fa-angle-up">
</div>
</li>
<li>
<div data-type="push"
data-device="RL_EG_AZ_1"
data-set-on="closed"
data-icon="fa-angle-down">
</div>
</li>
<li>
<div data-type="push"
data-device="RL_EG_AZ_1"
data-set-on="stop"
data-icon="fa-hand-stop-o">
</div>
</li>
<li>
<div data-type="select"
data-device="RL_EG_AZ_1"
data-get="pct"
data-set="pct"
data-items='["0","25","50","75","100"]'
data-alias='["auf","1/4","halb","3/4","zu"]'
class="wthBorder">
</div>
</li>
</ul>
</div>
<div data-type="label">Rollladen</div>
</div>
</div>
<div class="col-1-8">
<div class="container">
<div data-type="circlemenu" data-direction="bottom-half" class="circlemenu noshade keepopen">
<ul class="top-space">
<li>
<div data-type="symbol"
data-device="RL_EG_WC_2"
data-get="state"
data-states='["drive-up","drive-down","open","closed","half","pct-[0-9]","pct-1[0-9]","pct-2[0-9]","pct-3[0-9]","pct-4[0-9]","pct-5[0-9]","pct-6[0-9]","pct-7[0-9]","pct-8[0-9]","pct-9[0-9]","pct-100"]'
data-icons='["oa-fts_shutter_up","oa-fts_shutter_down","oa-fts_window_2w","oa-fts_shutter_100","oa-fts_shutter","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='["yellow","yellow","green","green","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050"]'>
</div>
</li>
<li>
<div data-type="push"
data-device="RL_EG_WC_2"
data-set-on="open"
data-icon="fa-angle-up">
</div>
</li>
<li>
<div data-type="push"
data-device="RL_EG_WC_2"
data-set-on="closed"
data-icon="fa-angle-down">
</div>
</li>
<li>
<div data-type="push"
data-device="RL_EG_WC_2"
data-set-on="stop"
data-icon="fa-hand-stop-o">
</div>
</li>
<li>
<div data-type="select"
data-device="RL_EG_WC_2"
data-get="pct"
data-set="pct"
data-items='["0","25","50","75","100"]'
data-alias='["auf","1/4","halb","3/4","zu"]'
class="wthBorder">
</div>
</li>
</ul>
</div>
<div data-type="label">Rollladen</div>
</div>
</div>
<div class="col-1-8">
<div class="container">
<div data-type="circlemenu" data-direction="bottom-half" class="circlemenu noshade keepopen">
<ul class="top-space">
<li>
<div data-type="symbol"
data-device="RL_EG_FL_3"
data-get="state"
data-states='["drive-up","drive-down","open","closed","half","pct-[0-9]","pct-1[0-9]","pct-2[0-9]","pct-3[0-9]","pct-4[0-9]","pct-5[0-9]","pct-6[0-9]","pct-7[0-9]","pct-8[0-9]","pct-9[0-9]","pct-100"]'
data-icons='["oa-fts_shutter_up","oa-fts_shutter_down","oa-fts_window_2w","oa-fts_shutter_100","oa-fts_shutter","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='["yellow","yellow","green","green","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050"]'>
</div>
</li>
<li>
<div data-type="push"
data-device="RL_EG_FL_3"
data-set-on="open"
data-icon="fa-angle-up">
</div>
</li>
<li>
<div data-type="push"
data-device="RL_EG_FL_3"
data-set-on="closed"
data-icon="fa-angle-down">
</div>
</li>
<li>
<div data-type="push"
data-device="RL_EG_FL_3"
data-set-on="stop"
data-icon="fa-hand-stop-o">
</div>
</li>
<li>
<div data-type="select"
data-device="RL_EG_FL_3"
data-get="pct"
data-set="pct"
data-items='["0","25","50","75","100"]'
data-alias='["auf","1/4","halb","3/4","zu"]'
class="wthBorder">
</div>
</li>
</ul>
</div>
<div data-type="label">Rollladen</div>
</div>
</div>
<div class="col-1-8">
<div class="container">
<div data-type="circlemenu" data-direction="bottom-half" class="circlemenu noshade keepopen">
<ul class="top-space">
<li>
<div data-type="symbol"
data-device="RL_EG_WZ1_4"
data-get="state"
data-states='["drive-up","drive-down","open","closed","half","pct-[0-9]","pct-1[0-9]","pct-2[0-9]","pct-3[0-9]","pct-4[0-9]","pct-5[0-9]","pct-6[0-9]","pct-7[0-9]","pct-8[0-9]","pct-9[0-9]","pct-100"]'
data-icons='["oa-fts_shutter_up","oa-fts_shutter_down","oa-fts_window_2w","oa-fts_shutter_100","oa-fts_shutter","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='["yellow","yellow","green","green","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050"]'>
</div>
</li>
<li>
<div data-type="push"
data-device="RL_EG_WZ1_4"
data-set-on="open"
data-icon="fa-angle-up">
</div>
</li>
<li>
<div data-type="push"
data-device="RL_EG_WZ1_4"
data-set-on="closed"
data-icon="fa-angle-down">
</div>
</li>
<li>
<div data-type="push"
data-device="RL_EG_WZ1_4"
data-set-on="stop"
data-icon="fa-hand-stop-o">
</div>
</li>
<li>
<div data-type="select"
data-device="RL_EG_WZ1_4"
data-get="pct"
data-set="pct"
data-items='["0","25","50","75","100"]'
data-alias='["auf","1/4","halb","3/4","zu"]'
class="wthBorder">
</div>
</li>
</ul>
</div>
<div data-type="label">Rollladen</div>
</div>
</div>
<div class="col-1-8">
<div class="container">
<div data-type="circlemenu" data-direction="bottom-half" class="circlemenu noshade keepopen">
<ul class="top-space">
<li>
<div data-type="symbol"
data-device="RL_EG_WZ2_5"
data-get="state"
data-states='["drive-up","drive-down","open","closed","half","pct-[0-9]","pct-1[0-9]","pct-2[0-9]","pct-3[0-9]","pct-4[0-9]","pct-5[0-9]","pct-6[0-9]","pct-7[0-9]","pct-8[0-9]","pct-9[0-9]","pct-100"]'
data-icons='["oa-fts_shutter_up","oa-fts_shutter_down","oa-fts_window_2w","oa-fts_shutter_100","oa-fts_shutter","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='["yellow","yellow","green","green","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050"]'>
</div>
</li>
<li>
<div data-type="push"
data-device="RL_EG_WZ2_5"
data-set-on="open"
data-icon="fa-angle-up">
</div>
</li>
<li>
<div data-type="push"
data-device="RL_EG_WZ2_5"
data-set-on="closed"
data-icon="fa-angle-down">
</div>
</li>
<li>
<div data-type="push"
data-device="RL_EG_WZ2_5"
data-set-on="stop"
data-icon="fa-hand-stop-o">
</div>
</li>
<li>
<div data-type="select"
data-device="RL_EG_WZ2_5"
data-get="pct"
data-set="pct"
data-items='["0","25","50","75","100"]'
data-alias='["auf","1/4","halb","3/4","zu"]'
class="wthBorder">
</div>
</li>
</ul>
</div>
<div data-type="label">Rollladen</div>
</div>
</div>
<div class="col-1-8">
<div class="container">
<div data-type="circlemenu" data-direction="bottom-half" class="circlemenu noshade keepopen">
<ul class="top-space">
<li>
<div data-type="symbol"
data-device="RL_EG_WZ3_6"
data-get="state"
data-states='["drive-up","drive-down","open","closed","half","pct-[0-9]","pct-1[0-9]","pct-2[0-9]","pct-3[0-9]","pct-4[0-9]","pct-5[0-9]","pct-6[0-9]","pct-7[0-9]","pct-8[0-9]","pct-9[0-9]","pct-100"]'
data-icons='["oa-fts_shutter_up","oa-fts_shutter_down","oa-fts_window_2w","oa-fts_shutter_100","oa-fts_shutter","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='["yellow","yellow","green","green","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050"]'>
</div>
</li>
<li>
<div data-type="push"
data-device="RL_EG_WZ3_6"
data-set-on="open"
data-icon="fa-angle-up">
</div>
</li>
<li>
<div data-type="push"
data-device="RL_EG_WZ3_6"
data-set-on="closed"
data-icon="fa-angle-down">
</div>
</li>
<li>
<div data-type="push"
data-device="RL_EG_WZ3_6"
data-set-on="stop"
data-icon="fa-hand-stop-o">
</div>
</li>
<li>
<div data-type="select"
data-device="RL_EG_WZ3_6"
data-get="pct"
data-set="pct"
data-items='["0","25","50","75","100"]'
data-alias='["auf","1/4","halb","3/4","zu"]'
class="wthBorder">
</div>
</li>
</ul>
</div>
<div data-type="label">Rollladen</div>
</div>
</div>
<div class="col-1-8">
<div class="container">
<div data-type="circlemenu" data-direction="bottom-half" class="circlemenu noshade keepopen">
<ul class="top-space">
<li>
<div data-type="symbol"
data-device="RL_EG_KUE_7"
data-get="state"
data-states='["drive-up","drive-down","open","closed","half","pct-[0-9]","pct-1[0-9]","pct-2[0-9]","pct-3[0-9]","pct-4[0-9]","pct-5[0-9]","pct-6[0-9]","pct-7[0-9]","pct-8[0-9]","pct-9[0-9]","pct-100"]'
data-icons='["oa-fts_shutter_up","oa-fts_shutter_down","oa-fts_window_2w","oa-fts_shutter_100","oa-fts_shutter","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='["yellow","yellow","green","green","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050"]'>
</div>
</li>
<li>
<div data-type="push"
data-device="RL_EG_KUE_7"
data-set-on="open"
data-icon="fa-angle-up">
</div>
</li>
<li>
<div data-type="push"
data-device="RL_EG_KUE_7"
data-set-on="closed"
data-icon="fa-angle-down">
</div>
</li>
<li>
<div data-type="push"
data-device="RL_EG_KUE_7"
data-set-on="stop"
data-icon="fa-hand-stop-o">
</div>
</li>
<li>
<div data-type="select"
data-device="RL_EG_KUE_7"
data-get="pct"
data-set="pct"
data-items='["0","25","50","75","100"]'
data-alias='["auf","1/4","halb","3/4","zu"]'
class="wthBorder">
</div>
</li>
</ul>
</div>
<div data-type="label">Rollladen</div>
</div>
</div>
<div class="col-1-8">
<div class="container">
<div data-type="circlemenu" data-direction="bottom-half" class="circlemenu noshade keepopen">
<ul class="top-space">
<li>
<div data-type="symbol"
data-device="RL_EG_AR_8"
data-get="state"
data-states='["drive-up","drive-down","open","closed","half","pct-[0-9]","pct-1[0-9]","pct-2[0-9]","pct-3[0-9]","pct-4[0-9]","pct-5[0-9]","pct-6[0-9]","pct-7[0-9]","pct-8[0-9]","pct-9[0-9]","pct-100"]'
data-icons='["oa-fts_shutter_up","oa-fts_shutter_down","oa-fts_window_2w","oa-fts_shutter_100","oa-fts_shutter","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='["yellow","yellow","green","green","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050"]'>
</div>
</li>
<li>
<div data-type="push"
data-device="RL_EG_AR_8"
data-set-on="open"
data-icon="fa-angle-up">
</div>
</li>
<li>
<div data-type="push"
data-device="RL_EG_AR_8"
data-set-on="closed"
data-icon="fa-angle-down">
</div>
</li>
<li>
<div data-type="push"
data-device="RL_EG_AR_8"
data-set-on="stop"
data-icon="fa-hand-stop-o">
</div>
</li>
<li>
<div data-type="select"
data-device="RL_EG_AR_8"
data-get="pct"
data-set="pct"
data-items='["0","25","50","75","100"]'
data-alias='["auf","1/4","halb","3/4","zu"]'
class="wthBorder">
</div>
</li>
</ul>
</div>
<div data-type="label">Rollladen</div>
</div>
</div>
</div>
</div>

</div>
</div>
</li>


Kann man das irgendwie ändern das die circle über die Ränder des popup hinaus angezeigt werden?
Weiter würde ich gerne auch die Ecken des popup rund darstellen lassen falls das möglich ist.

[klinkone]

hm... hat keiner eine Idee?

@setstate vielleicht?