Hallo liebe Gemeinde,
ich wage mich gerade an das Thema flexbox, bzw. bin ich schon mitten drin.
Ich hab jetzt schon für mich was ganz brauchbares gefunden, jedoch stehe ich jetzt vor einem Problem, für das ich derzeit keine Lösung sehe/finde.
Während dem Einlesen in flex, meinte ich gelesen zu haben, dass flex nur das widget direkt in der box mitanpasst, aber nicht ein Child des Widget?
Das ist dann wahrscheinlich auch genau mein Problem... Beim Ändern der Größe, wird dann das Circle Menu aus der Box verschoben....
hier mal mein jetzige Code:
<div class="vbox bg-red">
<div class="hbox bg-lightgray">
<div class="card grow-0"><header>WZ</header>
<div class="hbox">
<div class="cell">
<div data-type="label" class="cell wider">WZ Fenster</div>
<div data-type="symbol" data-device="dDummy3" data-icon="none" data-color='none' data-background-icon="fa-circle" data-background-color='["orange"]'>
<div data-type="label" class="small" data-device="wz_JalousieFenster" data-get="state" data-unit="%" data-color="white"></div>
</div>
<div data-type="slider" data-device="wz_JalousieFenster" data-get="STATE" data-min="0" data-max="100" data-on='(on|closed|down)' data-off='(open|off)' data-value=true class="negated"></div>
<div data-type="circlemenu" data-direction="right-half" data-circle-radius="90" data-item-diameter="67" class="cell keepopen" style="font-size:130%"><!--vor keepopen war: class="circlemenu right-space top-space-3x" -->
<ul class="menu">
<li> <div data-type="push" data-icon="fa-bars"></div></li>
<li> <div data-type="push" data-device="wz_JalousieFenster" data-icon="fa-angle-double-up" data-set-on="off"></div></li>
<li> <div data-type="push" data-device="wz_JalousieFenster" data-cmd="set" data-icon="fa-angle-up" data-set-on="pctSlat [wz_JalousieFenster:pctSlatSoll]"></div></li>
<li> <div data-type="push" data-device="wz_JalousieFenster" data-icon="fa-minus" data-set-on="stop"></div></li>
<li> <div data-type="push" data-device="wz_JalousieFenster" data-cmd="set" data-icon="fa-angle-down" data-set-on="pctSlat [wz_JalousieFenster:pctSlatSollOff]"></div></li>
<li> <div data-type="push" data-device="wz_JalousieFenster" data-icon="fa-angle-double-down" data-set-on="on"></div></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
Ich hoffe, ich konnte es halbwegs verständlich beschreiben, was mein Problem ist.
Weiß jemand eine Abhilfe dafür? Bzw. wie kann ich das Circle Menu in der Box fixieren?
Danke,
Tobi
Ich würde mal card statt cell direkt unter <div class="hbox"> versuchen.
Nein, das cell beim Circlemenu war schuld ;)
Der Code geht aber generell kürzer und übersichtlicher:
<div class="vbox">
<header>WZ</header>
<div data-type="label" class="card">WZ Fenster</div>
<div data-type="symbol" class="card" data-device="dDummy3" data-icon="none" data-color='none' data-background-icon="fa-circle" data-background-color='["orange"]'>
<div data-type="label" class="small" data-device="wz_JalousieFenster" data-get="state" data-unit="%" data-color="white"></div>
</div>
<div data-type="slider" class="card" data-device="wz_JalousieFenster" data-get="STATE" data-min="0" data-max="100" data-on='(on|closed|down)' data-off='(open|off)' data-value=true class="negated"></div>
<div data-type="circlemenu" class="card keepopen" data-direction="right-half" data-circle-radius="90" data-item-diameter="67" style="font-size:130%;"><!--vor keepopen war: class="circlemenu right-space top-space-3x" -->
<ul class="menu">
<li> <div data-type="push" data-icon="fa-bars"></div></li>
<li> <div data-type="push" data-device="wz_JalousieFenster" data-icon="fa-angle-double-up" data-set-on="off"></div></li>
<li> <div data-type="push" data-device="wz_JalousieFenster" data-cmd="set" data-icon="fa-angle-up" data-set-on="pctSlat [wz_JalousieFenster:pctSlatSoll]"></div></li>
<li> <div data-type="push" data-device="wz_JalousieFenster" data-icon="fa-minus" data-set-on="stop"></div></li>
<li> <div data-type="push" data-device="wz_JalousieFenster" data-cmd="set" data-icon="fa-angle-down" data-set-on="pctSlat [wz_JalousieFenster:pctSlatSollOff]"></div></li>
<li> <div data-type="push" data-device="wz_JalousieFenster" data-icon="fa-angle-double-down" data-set-on="on"></div></li>
</ul>
</div>
</div>
Hab mich verschaut. Das menu in <ul class="menu"> ist das Problem.
hätte dazu schreiben sollen, dass ich den code etwas gekürtzt habe... das cell ist dafür da, damit ich mehrere regler/widgets nebeneinander in einer box anordnen kann (siehe bild)
ja das menu ist das problem... aber das brauch ich ja...
Wofür?
naja wenn man das menu wegnimmt, dann sind alle buttons, die eigentlich erst sichtbar werden, wenn man das circlemenu anklickt, untereinander und sichtbar...
Also, ich hab bei keinem Circlemenu eine Klasse "menu". Und ich hab den Code, den ich oben gepostet habe, genau so bei mir eingebaut. Funktioniert einwandfrei.
aber in deinem code oben, ist doch auch <ul class="menu"> drinen?
Haha, ja, stimmt. Gut gesehen. Hab ich vergessen zu editieren. In meinem FTUI Code ist das weg.
Zitat von: drhirn am 16 Februar 2018, 20:11:54
Haha, ja, stimmt. Gut gesehen. Hab ich vergessen zu editieren. In meinem FTUI Code ist das weg.
Welchen code meinst du?
Den von 16.2.18 hier im Post?
LG Tobi
Ja, genau. Der hier. Diesmal in der korrigierten Version.
<div class="vbox">
<header>WZ</header>
<div data-type="label" class="card">WZ Fenster</div>
<div data-type="symbol" class="card" data-device="dDummy3" data-icon="none" data-color='none' data-background-icon="fa-circle" data-background-color='["orange"]'>
<div data-type="label" class="small" data-device="wz_JalousieFenster" data-get="state" data-unit="%" data-color="white"></div>
</div>
<div data-type="slider" class="card" data-device="wz_JalousieFenster" data-get="STATE" data-min="0" data-max="100" data-on='(on|closed|down)' data-off='(open|off)' data-value=true class="negated"></div>
<div data-type="circlemenu" class="card keepopen" data-direction="right-half" data-circle-radius="90" data-item-diameter="67" style="font-size:130%;"><!--vor keepopen war: class="circlemenu right-space top-space-3x" -->
<ul>
<li> <div data-type="push" data-icon="fa-bars"></div></li>
<li> <div data-type="push" data-device="wz_JalousieFenster" data-icon="fa-angle-double-up" data-set-on="off"></div></li>
<li> <div data-type="push" data-device="wz_JalousieFenster" data-cmd="set" data-icon="fa-angle-up" data-set-on="pctSlat [wz_JalousieFenster:pctSlatSoll]"></div></li>
<li> <div data-type="push" data-device="wz_JalousieFenster" data-icon="fa-minus" data-set-on="stop"></div></li>
<li> <div data-type="push" data-device="wz_JalousieFenster" data-cmd="set" data-icon="fa-angle-down" data-set-on="pctSlat [wz_JalousieFenster:pctSlatSollOff]"></div></li>
<li> <div data-type="push" data-device="wz_JalousieFenster" data-icon="fa-angle-double-down" data-set-on="on"></div></li>
</ul>
</div>
</div>