flexbox child Frage/Problem

Begonnen von NewMatic, 16 Februar 2018, 13:09:46

Vorheriges Thema - Nächstes Thema

NewMatic

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

drhirn

Ich würde mal card statt cell direkt unter <div class="hbox"> versuchen.

drhirn

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>

drhirn

Hab mich verschaut. Das menu in <ul class="menu"> ist das Problem.

NewMatic

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...

drhirn


NewMatic

naja wenn man das menu wegnimmt, dann sind alle buttons, die eigentlich erst sichtbar werden, wenn man das circlemenu anklickt, untereinander und sichtbar...

drhirn

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.

NewMatic

aber in deinem code oben, ist doch auch    <ul class="menu">     drinen?

drhirn

Haha, ja, stimmt. Gut gesehen. Hab ich vergessen zu editieren. In meinem FTUI Code ist das weg.

NewMatic

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

drhirn

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>