{ERLEDIGT]include-widget und flexbox

Begonnen von derHeimwerker, 25 August 2019, 19:16:05

Vorheriges Thema - Nächstes Thema

derHeimwerker

Hallo zusammen,

aus meiner Index.html rufe ich die die main_kueche.html auf.

<!DOCTYPE html>
<html>
<head>
<!-- subpage  -->
</head>
<body>

<div class="page" id="main_kueche">
<div class="vbox">
<div class="hbox">
<div class="card"><header>Box 01</header><div data-type="symbol"></div></div>
<div class="card"><header>Box 02</header><div data-type="symbol"></div></div>
<div class="card"><header>Box 03</header><div data-type="symbol"></div></div>
<div class="card"><header>Box 04</header><div data-type="symbol"></div></div>
</div>
<div class="hbox">
<div class="card"><header>Box 05</header><div data-type="symbol"></div></div>
<div class="card"><header>Box 06</header><div data-type="symbol"></div></div>
<div class="card"><header>Box 07</header><div data-type="symbol"></div></div>
<div class="card"><header>Box 08</header><div data-type="symbol"></div></div>
</div>
<div class="hbox">
<div class="card"><header>Box 09</header><div data-type="symbol"></div></div>
<div class="card"><header>Box 10</header><div data-type="symbol"></div></div>
<div class="card"><header>Box 11</header><div data-type="symbol"></div></div>
<div class="card"><header>Box 12</header><div data-type="symbol"></div></div>
</div>
<div class="hbox">
<div class="card"><header>Box 13</header><div data-type="symbol"></div></div>
<div class="card"><header>Box 14</header><div data-type="symbol"></div></div>
<div class="card"><header>Box 15</header><div data-type="symbol"></div></div>
<div class="card"><header>Box 16</header><div data-type="symbol"></div></div>
</div>
<!-- Aufruf Template fuer manuelle Rollladensteuerung  -->
<div class="hbox">
<div data-type="include"
data-url="template_roll_manuell.html"
data-parameter='{"var_roll_device":"Roll.Kueche"}'>
</div>
</div>

</div>
</div>
</body>
</html>


Per include-widget wird die template_roll_manuell.html eingebunden.


<!DOCTYPE html>
<html>
<!-- template von main_xy.html  -->
<head></head>
<body>
<div class="card">
<header>akt. Position</header>
<div data-type="label"
data-device="var_roll_device"
data-get="level"
data-limits='[180,30,0]'
data-colors='["green","blue","#FF0000"]'
class="bigger margin-top-5">
</div>
</div>
<div class="card">
<header>halb hoch</header>
<div data-type="push"
data-device="Button_Roll_Beschattung_du"
data-set-on="var_roll_device"
data-background-icon="mi-reorder"
data-icon=""
class="normal">
</div>
</div>
<div class="card">
<header>Roll hoch</header>
<div data-type="switch"
data-device="var_roll_device"
data-get=""
data-get-on="!stop.*"
data-get-off="stop.*"
data-set-on="up"
data-set-off="stop"
data-background-icon="fa-caret-up"
data-icon=""
class="normal">
</div>
</div>
<div class="card">
<header>Roll runter</header>
<div data-type="switch"
data-device="var_roll_device"
data-get=""
data-get-on="!stop.*"
data-get-off="stop.*"
data-set-on="down"
data-set-off="stop"
data-background-icon="fa-caret-down"
data-icon=""
class="normal">
</div>
</div>
</body>
</html>



Leider sieht das Ergebnis so aus, wie im Bild (mit template.png).

Es soll aber so aussehen, wie im Bild (ohne template.png)

Kann mir da jemand helfen?

Danke!

elle

Hi,
ohne es jetzt testen zu können (bin gerade nur am Handy) und ohne 100% sicher zu sein, würde ich denken, daß du dem  div, mit dem du die andere Datei einbindet die Klasse hbox geben musst und das div drum herum, das jetzt die hbox ist, entfernen musst.

<!-- Aufruf Template fuer manuelle Rollladensteuerung  -->
<div class="hbox" data-type="include"
data-url="template_roll_manuell.html" data-parameter='{"var_roll_device":"Roll.Kueche"}'>
</div>

Gruß

Jens

derHeimwerker

Hey jens, vielen dank für die Antwort, aber wenn ich dich richtig verstehe, dann habe ich doch genau das getan ?!

elle

Hallo,

nicht ganz - du hast den include innerhalb eines divs der Klasse hbox, aber das include-div selbst müsste diese Klasse haben und das äußere div müsste weg.

Gruß

Jens

derHeimwerker

jetzt ist der Aufruf so :

<!-- Aufruf Template fuer manuelle Rollladensteuerung  -->

<div data-type="include"
data-url="template_roll_manuell.html"
data-parameter='{"var_roll_device":"Roll.Kueche"}'>
</div>


und die template Datei:


<div class="hbox">
<div class="card">
<header>akt. Position</header>
<div data-type="label"
data-device="var_roll_device"
data-get="level"
data-limits='[100,30,0]'
data-colors='["green","blue","#FF0000"]'
class="bigger margin-top-5">
</div>
</div>
<div class="card">
<header>halb hoch</header>
<div data-type="push"
data-device="Button_Roll_Beschattung_du"
data-set-on="var_roll_device"
data-background-icon="mi-reorder"
data-icon=""
class="normal">
</div>
</div>
<div class="card">
<header>Roll hoch</header>
<div data-type="switch"
data-device="var_roll_device"
data-get=""
data-get-on="!stop.*"
data-get-off="stop.*"
data-set-on="up"
data-set-off="stop"
data-background-icon="fa-caret-up"
data-icon=""
class="normal">
</div>
</div>
<div class="card">
<header>Roll runter</header>
<div data-type="switch"
data-device="var_roll_device"
data-get=""
data-get-on="!stop.*"
data-get-off="stop.*"
data-set-on="down"
data-set-off="stop"
data-background-icon="fa-caret-down"
data-icon=""
class="normal">
</div>
</div>
</div>
</body>
</html>

Das Ergebnis sieht nun so aus...

elle

Hallo,

mach bitte mal so :

<!-- Aufruf Template fuer manuelle Rollladensteuerung  -->
<div class="hbox" data-type="include"
data-url="template_roll_manuell.html"
data-parameter='{"var_roll_device":"Roll.Kueche"}'>
</div>


und die template Datei:


<div class="card">
<header>akt. Position</header>
<div data-type="label"
data-device="var_roll_device"
data-get="level"
data-limits='[100,30,0]'
data-colors='["green","blue","#FF0000"]'
class="bigger margin-top-5">
</div>
</div>
<div class="card">
<header>halb hoch</header>
<div data-type="push"
data-device="Button_Roll_Beschattung_du"
data-set-on="var_roll_device"
data-background-icon="mi-reorder"
data-icon=""
class="normal">
</div>
</div>
<div class="card">
<header>Roll hoch</header>
<div data-type="switch"
data-device="var_roll_device"
data-get=""
data-get-on="!stop.*"
data-get-off="stop.*"
data-set-on="up"
data-set-off="stop"
data-background-icon="fa-caret-up"
data-icon=""
class="normal">
</div>
</div>
<div class="card">
<header>Roll runter</header>
<div data-type="switch"
data-device="var_roll_device"
data-get=""
data-get-on="!stop.*"
data-get-off="stop.*"
data-set-on="down"
data-set-off="stop"
data-background-icon="fa-caret-down"
data-icon=""
class="normal">
</div>
</div>
</body>
</html>

Das Ergebnis sieht nun so aus...


include und template fuegen den Inhalt als Kind von sich selbst ein, daher bekommst Du bei Deinen Varianten ein zusaetzliches <div> dazwischen geschoben; das kannst Du Dir im DOM Inspector angucken und dann sieht die resultierende Struktur bei Dir so aus:

<div class="hbox">
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</div>
<div data-type="include">
  <div class="hbox">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
  </div>
</div>

Sie muss aber so aussehen:

<div class="hbox">
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</div>
<div data-type="include" class="hbox">
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</div>


Ich habe jetzt mal irrelevantes HTML weggelassen ...

Gruss

Jens

derHeimwerker

Herzlichen Dank, das war die Lösung :-)