FHEM Forum

FHEM => Frontends => TabletUI => Thema gestartet von: Stril am 26 Oktober 2016, 13:49:49

Titel: Circlemenu oval
Beitrag von: Stril am 26 Oktober 2016, 13:49:49
Hallo!

Seit dem letzten Update sehen bei mir die Circle-Menus eigenartig aus:


<div data-type="circlemenu" data-item-diameter="100" data-circle-radius="100" >
    <ul>

        <li><div data-type="symbol" data-icon="fa-lightbulb-o" data-background-icon="fa-circle-o" data-device="AlleLichterOGBad"
                data-get-on='on' data-get-off='off'></div></li>

        <li><div data-type="switch" data-device="aLs_OG_Bad_Spots"></div>Spots</li>
        <li><div data-type="switch" data-device="aLs_OG_Bad_Spiegellicht"></div>Spiegel</li>
        <li><div data-type="switch" data-device="aLs_OG_Bad_Lichtband"></div>Fenster</li>
    </ul>
</div>


Jeweils der zweite Eintrag im Menü (hier Spiegellicht) ist eigenartig: Der Hintergrund ist dann nicht rund, sondern oval und der Text der Beschreibung ist darunter. Auch ohne Text sind die Felder hinter den Devices oval.

Habt ihr dazu noch eine Idee?

Grüße
Phil
Titel: Antw:Circlemenu oval
Beitrag von: Stril am 26 Oktober 2016, 13:54:11
Nachtrag:

Alle Einträge auf der rechten Seite des Circlemenus sind oval...

Grüße
Phil
Titel: Antw:Circlemenu oval
Beitrag von: Stril am 26 Oktober 2016, 15:18:23
Hallo!

Noch ein Nachtrag:

Ich habe die alte Version der jquery.circlemenu.js und widget_circlemenu.js noch einmal genommen. Jetzt passt es wieder.
Eine der Änderungen scheint hier ein Problem auszulösen.

Grüße
Phil
Titel: Antw:Circlemenu oval
Beitrag von: setstate am 28 Oktober 2016, 22:56:32
Durch die unterschiedlichen Breite der Wörter klappt es mit width: auto hier nicht.
Deshalb muss man es fest vorgeben. -> data-item-width="100"
Mit dem Text rechts daneben sieht es aber nicht mehr so schön mit verdunkeltem Hintergrund aus.
Ich würde deswegen noch  class="noshade" angeben

<div data-type="circlemenu" data-item-width="100" data-item-diameter="100" data-circle-radius="100" class="noshade">
Titel: Antw:Circlemenu oval
Beitrag von: setstate am 28 Oktober 2016, 23:03:26
Oder man setzte den Text unter die Knöpfe


    <div data-type="circlemenu">
        <ul>
            <li><div data-type="symbol" data-icon="fa-lightbulb-o" data-background-icon="fa-circle-o" data-device="AlleLichterOGBad"
                    data-get-on='on' data-get-off='off'></div></li>

            <li><div data-type="switch" data-device="aLs_OG_Bad_Spots"></div><div class="top-narrow">Spots</div></li>
            <li><div data-type="switch" data-device="aLs_OG_Bad_Spiegellicht"></div><div class="top-narrow">Spiegel</div></li>
            <li><div data-type="switch" data-device="aLs_OG_Bad_Lichtband"></div><div class="top-narrow">Fenster</div></li>
        </ul>
    </div>
Titel: Antw:Circlemenu oval
Beitrag von: Stril am 29 Oktober 2016, 21:48:30
Hallo!

Mit dem Text unter den Buttons sieht es prima aus.
Vielen Dank!

Grüße
Phil