V2.9: Fehlende Symbole im Untermenü - Beispiel1

[Sandman60]

Hi,

beim Umstellen von 2.7 auf 2.9 ist mir ein Problem mit der Darstellung von Items in einem Submenü aufgefallen. Scheint auch im Example1 (zumindest bei mir) der Fall zu sein.

Sieht dann so aus:
Fehler_Menu_Example1.PNG

und sollte eigentlich Icons enthalten (so z.B. (Bsp. aus meiner alten 2.7)):
Korrekt_Menü.PNG

Ist das nur bei mir so?
Any idea?

Vielen Dank & viele Grüße

P.S.: Die referenzierten SVGs sind vorhanden.

[manu241]

Hallo,

wie sieht denn deine Config dazu aus?

Gruß Manuel

[Sandman60]

Hi,

na eben analog dem Example1.smarthome der V2.9, also

    <style>
        .nav-custom .ui-btn .ui-btn-inner {
            padding-top: 40px !important;
        }

        .nav-custom .ui-btn .ui-icon {
            width: 30px !important;
            height: 30px !important;
            margin-left: -15px !important;
            box-shadow: none !important;
            -moz-box-shadow: none !important;
            -webkit-box-shadow: none !important;
            -webkit-border-radius: 0 !important;
            border-radius: 0 !important;
        }

        #kochen .ui-icon {
            background: url({{ icon0 }}scene_cooking.svg) 50% 50% no-repeat;
            background-size: 36px 36px;
        }

        #essen .ui-icon {
            background: url({{ icon0 }}scene_dinner.svg) 50% 50% no-repeat;
            background-size: 36px 36px;
        }

        #wohnen .ui-icon {
            background: url({{ icon0 }}it_television.svg) 50% 50% no-repeat;
            background-size: 36px 36px;
        }
    </style>
    <div data-role="navbar" class="nav-custom">
        <ul>
            <li><a href="index.php?page=EG.Kueche" class="ui-btn-active" id="kochen" data-icon="custom">Küche</a></li>
            <li><a href="index.php?page=EG.Esszimmer" id="essen" data-icon="custom">Essbereich</a></li>
            <li><a href="index.php?page=EG.Multimedia" id="wohnen" data-icon="custom">Multimedia</a></li>
        </ul>
    </div>

Hat bis 2.8 gefunzt, kann auch in der FF-Console erst mal keinen Fehler diesbezüglich lesen.

[MiWu]

Ist das nur bei mir so?

Gleiches Problem hier. Sowohl im Beispiel als auch in den selbst gebastelten Seiten. Browser ist Firefox. Kann es sein, dass der Style-Block irgendwie unter die Räder kommt und seinen Weg nicht in die fertige Seite findet?

[Sandman60]

THX.
smai : Könntest Du Dir bitte das Beispiel1 der Doku mal anschauen und mir bitte nen Tipp geben? THX!

[smai]

Ja, werde ich machen. Bin momentan im Skiurlaub und HTML lässt sich auf dem Tablet schlecht debugen.

[Sandman60]

Danke für die Rückmeldung smai und keine Eile! Genieß den Urlaub!

[smai]

Das geht so tatsächlich nicht mehr. So sieht die aktuelle Lösung aus:

    <style>
        .nav-custom .ui-btn {
            padding-top: 40px !important;
        }

        .nav-custom .ui-btn:after {
            background-color: transparent;
            width: 30px !important;
            height: 30px !important;
            margin-left: -15px !important;
            background-size: 36px 36px;
        }

        #kochen:after {
            background-image: url("{{ icon0 }}scene_cooking.svg");
        }

        #essen:after {
            background-image: url("{{ icon0 }}scene_dinner.svg");
        }

        #wohnen:after {
            background-image: url("{{ icon0 }}it_television.svg");
        }

    </style>
    <div data-role="navbar" class="nav-custom">
        <ul>
            <li><a href="index.php?page=EG.Kueche" id="kochen" class="ui-btn-icon-top">Küche</a></li>
            <li><a href="index.php?page=EG.Esszimmer" class="ui-btn-active ui-btn-icon-top" id="essen">Essbereich</a></li>
            <li><a href="index.php?page=EG.Multimedia" id="wohnen" class="ui-btn-icon-top">Multimedia</a></li>
        </ul>
    </div>

Die ersten zwei Regeln des CSS sind übrigens in der visu.css viel besser aufgehoben, damit sie nicht mehrfach geladen werden.
Ich habe die Beispielpage entsprechend angepasst.

[Sandman60]

Spitze! Ich danke Dir. werde updaten und mir dann das Beispiel reinziehen!