Update (03.09.2017) - Elemente verschoben

[Fixel2012]

Die Version, die keinen Workaround braucht, sollte oben sein.

sorry, aber verstehe nicht was du meinst und wo es sein soll. 

[setstate]

Nein, gibt es natürlich nicht. Bekomme ich oft erst nachher durch anderen mit, was manche minimalen Änderung an unerwarteten Stellen bewirken.

Ich verfolge immer noch das Ziel, das HTML und die CSS Klassen so simple und minimal wie möglich zu halten. Ohne unnötige explizite Wrapper Container und ohne riesige class Kaskaden. Das Ergebnis sollte aber trotzdem den Erwartungen entsprechen: den vorhanden Platz sinnvoll nutzt und einfach auszurichten sein. Dabei knackt und kracht es bestimmt immer mal wieder oder geht kurzzeitig in die falsche Richtung. Aber ist ja alles zum Glück nicht in Stein gemeißelt ...

[setstate]

sorry, aber verstehe nicht was du meinst und wo es sein soll. 

Wenn man jetzt ein Update macht oder gestern Abend gemacht hat, braucht man den Workaround nicht.

Gegenteiliges bitte mit konkretem Beispiel beschreiben

[Fixel2012]

Wenn man jetzt ein Update macht oder gestern Abend gemacht hat, braucht man den Workaround nicht.

Gegenteiliges bitte mit konkretem Beispiel beschreiben

Achso, gut, wusste nicht das das schon im offiziellen Update gefixt ist.

Danke dir!

[Standarduser]

Gibt es hierfür noch eine Antwort? 

In der Regel ist es so, dass die Benutzer solche Sachen im Wiki dokumentieren. Das hinkt leider manchmal hinterher, gerade wenn es viele Änderungen gibt.
Aber du darfst dich da gerne dran beteiligen.

[setstate]

In der Regel ist es so, dass die Benutzer solche Sachen im Wiki dokumentieren. Das hinkt leider manchmal hinterher, gerade wenn es viele Änderungen gibt.
Aber du darfst dich da gerne dran beteiligen.

Diese umgedrehte Art und Weise der Dokumentation ist zwar ziemlich ungewöhnlich, aber kommt mir sehr zu Gute und ich bedanke mich innigst dafür 

[fhainz]

Nur ob die user da besser durchblicken als der autor lass ich mal so stehen

[Fixel2012]

Wenn man jetzt ein Update macht oder gestern Abend gemacht hat, braucht man den Workaround nicht.

Gegenteiliges bitte mit konkretem Beispiel beschreiben

Die vboxen funktionieren nun wieder ordnungsgemäß, Danke!

Allerdings kann ich von der Rechten vbox (siehe code weiter unten) nur noch das oberste Icon (kamera) clicken. Alle anderen sind nicht mehr click-bar 

Die Linke vbox, die vom code eigentlich ähnlich bzw. fast gleich ist, ist bei allen icon click-bar.

Sehr komisch...

Auch Browser Cache leeren hat bei der Sache nichts geholfen.

Hat jemand ähnliche Probleme?

Code Auswählen Erweitern

<!-- ============= Menü Links  ============= -->
<!-- ======================================= -->


<li data-row="1" data-col="1" data-sizex="1" data-sizey="10" class="semitransparent3d">
<header  class="semitransparentheader">Menü</header>

<div class="vbox">


<div data-type="pagebutton" data-url="#content_main.html" data-load="#content1" data-off-background-color="rgba(0,0,0,0)" data-on-background-color="rgba(0,0,0,0)" data-off-color="#0087EA" data-on-color="#273D5C" data-active-pattern="(.*/||.*index.html||.*#content_main.html)" data-icon="fa-home" class="prefetch big shadow"></div>
<div data-type="label" class="small shadow">Home</div>
<div data-type="pagebutton" data-url="#content_Sonos.html" data-load="#content2" data-off-background-color="rgba(0,0,0,0)" data-on-background-color="rgba(0,0,0,0)" data-off-color="#0087EA" data-on-color="#273D5C" data-active-pattern=".*#content_Sonos.html" data-icon="fa-music" class="big top-space shadow"></div>
<div data-type="label" class="small shadow">Sonos</div>
<div data-type="pagebutton" data-url="#content_wecker.html"    data-load="#content3" data-off-background-color="rgba(0,0,0,0)" data-on-background-color="rgba(0,0,0,0)" data-off-color="#0087EA" data-on-color="#273D5C" data-active-pattern=".*#content_wecker.html" data-icon="fa-clock-o" class="big top-space shadow"></div>
<div data-type="label" class="small shadow">Wecker</div>
<div data-type="pagebutton" data-url="#content_felix.zimmer.html"     data-load="#content4" data-off-background-color="rgba(0,0,0,0)" data-on-background-color="rgba(0,0,0,0)" data-off-color="#0087EA" data-on-color="#273D5C" data-active-pattern=".*#content_felix.zimmer.html" data-icon="oa-scene_livingroom" class="big top-space shadow"></div>
<div data-type="label" class="small shadow">Felix Zimmer</div>
<div data-type="pagebutton" data-url="#content_zentrale.html"     data-load="#content5" data-off-background-color="rgba(0,0,0,0)" data-on-background-color="rgba(0,0,0,0)" data-off-color="#0087EA" data-on-color="#273D5C" data-active-pattern=".*#content_zentrale.html" data-icon="fa-cogs" class="big top-space shadow"></div>
<div data-type="label" class="small shadow">Zentrale</div>

</div>
</li>



<!-- ============= Menü Rechts  ============= -->
<!-- ======================================= -->

<li data-row="1" data-col="14" data-sizex="1" data-sizey="10" class="semitransparent3d">
<header  class="semitransparentheader">Menü</header>
<div class="vbox">
<div data-type="pagebutton" data-url="#content_kameras.html"      data-load="#content6" data-off-background-color="rgba(0,0,0,0)" data-on-background-color="rgba(0,0,0,0)" data-off-color="#0087EA" data-on-color="#273D5C" data-active-pattern=".*#content_kameras.html" data-icon="oa-it_camera" class="big  shadow"></div>
<div data-type="label" class="small shadow">Kamera</div>
<div data-type="pagebutton" data-url="#content_rolllaeden.html"  data-load="#content7" data-off-background-color="rgba(0,0,0,0)" data-on-background-color="rgba(0,0,0,0)" data-off-color="#0087EA" data-on-color="#273D5C" data-active-pattern=".*#content_rolllaeden.html" data-icon="oa-fts_shutter_60" class="prefetch big top-space shadow"></div>
<div data-type="label" class="small shadow">Rollläden</div>
<div data-type="pagebutton" data-url="#content_telefon.html"     data-load="#content8" data-off-background-color="rgba(0,0,0,0)" data-on-background-color="rgba(0,0,0,0)" data-off-color="#0087EA" data-on-color="#273D5C" data-active-pattern=".*#content_telefon.html" data-icon="fa-phone" class="big top-space shadow"></div>
<div data-type="label" class="small shadow">Anrufe</div>
<div data-type="pagebutton" data-url="#content_tanken.html"       data-load="#content9" data-off-background-color="rgba(0,0,0,0)" data-on-background-color="rgba(0,0,0,0)" data-off-color="#0087EA" data-on-color="#273D5C" data-active-pattern=".*#content_tanken.html" data-icon="fa-car" class="big top-space shadow"></div>
<div data-type="label" class="small shadow">Spritpreise</div>
<div data-type="pagebutton" data-url="#content_garten.html"    data-load="#content10" data-off-background-color="rgba(0,0,0,0)" data-on-background-color="rgba(0,0,0,0)" data-off-color="#0087EA" data-on-color="#273D5C" data-active-pattern=".*#content_garten.html" data-icon="oa-scene_garden" class="big top-space shadow"></div>
<div data-type="label" class="small shadow">Garten</div>

</div>
</li>

[gloob]

Also ich hab jetzt auch alle

Code Auswählen Erweitern

/> durch

Code Auswählen Erweitern

></div> ersetzt.

nachdem ich die Rowe angepasst habe sieht die Formatierung auf der ersten Seite auch wieder gut aus.

Rufe ich allerdings die 2. oder 3. Unterseite auf über das Menu. Sind die Gridster Elemente alle nach unten verschoben.

SubPage2

Code Auswählen Erweitern

<html>
<title>FHEM Sub2</title>
<head>
</head>
<body>
<div class="page" id="sub2">
<div class="gridster">
<ul>
<!-- ****************************************** -->
<!-- Sonos 1 -->
<!-- ****************************************** -->
<li data-row="1" data-col="1" data-sizex="3" data-sizey="4">
<header>
<font size="+1">Sonos Wohnzimmer</font>
</header>
<div data-type="image" data-device="Sonos_Wohnzimmer" data-get="currentAlbumArtURL" data-size="65%" class="top-space"></div>
</li>

<li data-row="5" data-col="1" data-sizex="3" data-sizey="3">
<div class="vbox">
<div data-type="label" class="bigger thin" data-device="Sonos_Wohnzimmer" data-get="transportState"></div>
<div data-type="label" class="thin" data-device="Sonos_Wohnzimmer" data-get="infoSummarize1"></div>
</div>
</li>   

<li data-row="8" data-col="1" data-sizex="3" data-sizey="4">
<div class="vbox">
<div class="hbox">
<div data-type="push" data-device="Sonos_Wohnzimmer" data-icon="fa-step-backward" data-set-on="Previous" class="normal"></div>
<div data-type="push" data-device="Sonos_Wohnzimmer" data-icon="fa-stop" data-set-on="Stop" class="normal"></div>
<div data-type="push" data-device="Sonos_Wohnzimmer" data-icon="fa-play" data-set-on="Play" class="normal"></div>
<div data-type="push" data-device="Sonos_Wohnzimmer" data-icon="fa-step-forward" data-set-on="Next" class="normal"></div>
</div> 
<div class="hbox">
<div data-type="volume" data-device="Sonos_Wohnzimmer" data-get="Volume" data-set="Volume" data-min="0" data-max="30" data-tickstep="10" data-unit="%" class="top-space normal"></div>
</div>
</div>
</li> 

<li data-row="12" data-col="1" data-sizex="3" data-sizey="3">
<div class="vbox">
<div class="hbox items-space-around">
<div data-type="select" data-device="Sonos_Wohnzimmer" data-items='["Schmutzki"]' data-set="startFavourite" class="w3x"></div>
<div>Playlisten</div>
</div>
<div class="hbox items-space-around">
<div data-type="select" data-device="Sonos_Wohnzimmer" data-items='["HR3","JUMP","YOU_FM","House"]' data-set="startFavourite" class="w3x"></div> 
<div>Radio</div>
</div>
</div>
</li>

<!-- ****************************************** -->
<!-- Sonos 2 -->
<!-- ****************************************** -->
<li data-row="1" data-col="4" data-sizex="3" data-sizey="4">
<header>
<font size="+1">Sonos Küche</font>
</header>
<div data-type="image" data-device="Sonos_Kueche" data-get="currentAlbumArtURL" data-size="65%" class="top-space"></div>
</li>

<li data-row="5" data-col="4" data-sizex="3" data-sizey="3">
<div class="vbox">
<div data-type="label" class="bigger thin" data-device="Sonos_Kueche" data-get="transportState"></div>
<div data-type="label" class="thin" data-device="Sonos_Kueche" data-get="infoSummarize1"></div>
</div>
</li>   

<li data-row="8" data-col="4" data-sizex="3" data-sizey="4">
<div class="vbox">
<div class="hbox">
<div data-type="push" data-device="Sonos_Kueche" data-icon="fa-step-backward" data-set-on="Previous" class="normal"></div>
<div data-type="push" data-device="Sonos_Kueche" data-icon="fa-stop" data-set-on="Stop" class="normal"></div>
<div data-type="push" data-device="Sonos_Kueche" data-icon="fa-play" data-set-on="Play" class="normal"></div>
<div data-type="push" data-device="Sonos_Kueche" data-icon="fa-step-forward" data-set-on="Next" class="normal"></div>
</div> 
<div class="hbox">
<div data-type="volume" data-device="Sonos_Kueche" data-get="Volume" data-set="Volume" data-min="0" data-max="30" data-tickstep="10" data-unit="%" class="top-space normal"></div>
</div>
</div>
</li> 

<li data-row="12" data-col="4" data-sizex="3" data-sizey="3">
<div class="vbox">
<div class="hbox items-space-around">
<div data-type="select" data-device="Sonos_Kueche" data-items='["Schmutzki"]' data-set="startFavourite" class="w3x"></div>
<div>Playlisten</div>
</div>
<div class="hbox items-space-around">
<div data-type="select" data-device="Sonos_Kueche" data-items='["HR3","JUMP","YOU_FM","House"]' data-set="startFavourite" class="w3x"></div> 
<div>Radio</div>
</div>
</div>
</li>

<!-- ****************************************** -->
<!-- Sonos 3 -->
<!-- ****************************************** -->
<li data-row="1" data-col="7" data-sizex="3" data-sizey="4">
<header>
<font size="+1">Sonos Keno</font>
</header>
<div data-type="image" data-device="Sonos_Kinderzimmer" data-get="currentAlbumArtURL" data-size="65%" class="top-space"></div>
</li>

<li data-row="5" data-col="7" data-sizex="3" data-sizey="3">
<div class="vbox">
<div data-type="label" class="bigger thin" data-device="Sonos_Kinderzimmer" data-get="transportState"></div>
<div data-type="label" class="thin" data-device="Sonos_Kinderzimmer" data-get="infoSummarize1"></div>
</div>
</li>   

<li data-row="8" data-col="7" data-sizex="3" data-sizey="4">
<div class="vbox">
<div class="hbox">
<div data-type="push" data-device="Sonos_Kinderzimmer" data-icon="fa-step-backward" data-set-on="Previous" class="normal"></div>
<div data-type="push" data-device="Sonos_Kinderzimmer" data-icon="fa-stop" data-set-on="Stop" class="normal"></div>
<div data-type="push" data-device="Sonos_Kinderzimmer" data-icon="fa-play" data-set-on="Play" class="normal"></div>
<div data-type="push" data-device="Sonos_Kinderzimmer" data-icon="fa-step-forward" data-set-on="Next" class="normal"></div>
</div> 
<div class="hbox">
<div data-type="volume" data-device="Sonos_Kinderzimmer" data-get="Volume" data-set="Volume" data-min="0" data-max="30" data-tickstep="10" data-unit="%" class="top-space normal"></div>
</div>
</div>
</li> 

<li data-row="12" data-col="7" data-sizex="3" data-sizey="3">
<div class="vbox">
<div class="hbox items-space-around">
<div data-type="select" data-device="Sonos_Kinderzimmer" data-items='["Schmutzki"]' data-set="startFavourite" class="w3x"></div>
<div>Playlisten</div>
</div>
<div class="hbox items-space-around">
<div data-type="select" data-device="Sonos_Kinderzimmer" data-items='["HR3","JUMP","YOU_FM","House"]' data-set="startFavourite" class="w3x"></div> 
<div>Radio</div>
</div>
</div>
</li>

<!-- ****************************************** -->
<!-- Sonos 4 -->
<!-- ****************************************** -->
<li data-row="1" data-col="10" data-sizex="3" data-sizey="4">
<header>
<font size="+1">Sonos Balkon</font>
</header>
<div data-type="image" data-device="Sonos_Balkon" data-get="currentAlbumArtURL" data-size="65%" class="top-space"></div>
</li>

<li data-row="5" data-col="10" data-sizex="3" data-sizey="3">
<div class="vbox">
<div data-type="label" class="bigger thin" data-device="Sonos_Balkon" data-get="transportState"></div>
<div data-type="label" class="thin" data-device="Sonos_Balkon" data-get="infoSummarize1"></div>
</div>
</li>   

<li data-row="8" data-col="10" data-sizex="3" data-sizey="4">
<div class="vbox">
<div class="hbox">
<div data-type="push" data-device="Sonos_Balkon" data-icon="fa-step-backward" data-set-on="Previous" class="normal"></div>
<div data-type="push" data-device="Sonos_Balkon" data-icon="fa-stop" data-set-on="Stop" class="normal"></div>
<div data-type="push" data-device="Sonos_Balkon" data-icon="fa-play" data-set-on="Play" class="normal"></div>
<div data-type="push" data-device="Sonos_Balkon" data-icon="fa-step-forward" data-set-on="Next" class="normal"></div>
</div> 
<div class="hbox">
<div data-type="volume" data-device="Sonos_Balkon" data-get="Volume" data-set="Volume" data-min="0" data-max="30" data-tickstep="10" data-unit="%" class="top-space normal"></div>
</div>
</div>
</li> 

<li data-row="12" data-col="10" data-sizex="3" data-sizey="3">
<div class="vbox">
<div class="hbox items-space-around">
<div data-type="select" data-device="Sonos_Balkon" data-items='["Schmutzki"]' data-set="startFavourite" class="w3x"></div>
<div>Playlisten</div>
</div>
<div class="hbox items-space-around">
<div data-type="select" data-device="Sonos_Balkon" data-items='["HR3","JUMP","YOU_FM","House"]' data-set="startFavourite" class="w3x"></div> 
<div>Radio</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>



Gibt es denn irgendwo ein aktuelles Beispiel was funktioniert, wo man sich mal die "aktuelle" Struktur mit PageTab angucken kann?
Die Demo bei Git ist ja auch schon 2 Jahre alt.

Und sollte man eher PageTab oder PageButton nutzen?

[oeiber]

Hallo,

bei mir sieht die Seite auch etwas verschoben aus. Ich verwende section:

Code Auswählen Erweitern


<main id="panel" class="">
        <div class="page" id="wohnzimmer">
            <section>
                <div class="large col-1-2 left-align">Fernseher und Soundbar</div>
                <div class="col-1-4"></div>
                <div data-type="switch" data-device="STD01" class="col-1-4 small center-align"></div>
            </section>
</main>



Danke schon mal!

[setstate]

die <section> Parameter habe ich jetzt etwas aufgeräumt, sodass es jetzt egal welche Größe immer passt

Code Auswählen Erweitern


<body>
    <main id="panel" class="">
        <div class="">
            <section>
                <div class="col-2">&nbsp;</div>
                <div class="col-40 left-align">Normal Size</div>
                <div class="col-55 right-align" data-type="switch" data-device="dummy1"></div>
            </section>
            <section>
                <div class="col-2">&nbsp;</div>
                <div class="col-40 left-align">Normal Size</div>
                <div class="col-55 right-align" data-type="switch" data-device="dummy1"></div>
            </section>
        </div>
        <div class="xl">
            <section>
                <div class="col-2">&nbsp;</div>
                <div class="col-40 left-align">Big Size</div>
                <div class="col-55 right-align" data-type="switch" data-device="dummy1"></div>
            </section>
            <section>
                <div class="col-2">&nbsp;</div>
                <div class="col-40 left-align">Big Size</div>
                <div class="col-55 right-align" data-type="switch" data-device="dummy1"></div>
            </section>
            <div class="xxl">
                <section>
                    <div class="col-2">&nbsp;</div>
                    <div class="col-40 left-align">Bigger Size</div>
                    <div class="col-55 right-align" data-type="switch" data-device="dummy1"></div>
                </section>
                <section>
                    <div class="col-2">&nbsp;</div>
                    <div class="col-40 left-align">Bigger Size</div>
                    <div class="col-55 right-align" data-type="switch" data-device="dummy1"></div>
                </section>
            </div>
        </div>
    </main>
</body>


[Fixel2012]

@All

Mein Problem aus #22 hat sich nach dem neusten Update erledigt!

Ich kann nun alle meine Menü Punkte wieder aufrufen.

Danke @setstate!

[oeiber]

Hallo setstate,

funktioniert soweit wieder bei mir, danke!
Allerdings habe ich noch ein Problem:

Ich versende leere Spalten als Platzhalter, damit alles schön übereinander ist:

Code Auswählen Erweitern

<div class="col-1-4"></div>

Das funktioniert aber seit dem Update leider nicht mehr. Die leeren Spalten werden ausgeblendet.

Hast du eine Idee, wie man das lösen könnte?

Danke schon mal!

[setstate]

Die Spalte muss mindestens ein Zeichen Inhalt haben. Idealerweise ein Leerzeichen.

Code Auswählen Erweitern


<div class="col-1-4">&nbsp;</div>


Ich müsste mal probieren, ob min-height: 1px; auch funktioniert. Dann könnte man sich den Workaround mit dem Leerzeichen sparen.

[setstate]

Klappt jetzt auch wieder ohne Extra &nbsp;

min-height: 1px; in CSS File hilft

Code Auswählen Erweitern

<div class="col-2"></div>