basic.button funktioniert nicht mit inline-pic

[Maxthomas2001]

Hallo,
ich habe ein Problem mit meinen basic.button. Ich möchte oben auf den Raumseiten platzieren, um damit Szenen aufzurufen.
Wenn im dabei auf dem Button ein Icon angezeigt werden soll, funktioniert alles ohne Probleme. Buttons, auf denen inline-pics angezeigt werden sollen, bleiben leer.
Szenen 1.jpg

Wenn ich zusätzlich zum inline-pic noch Text anzeigen lassen, passt wieder alles.
Szenen 2.jpg

Hier der Code:

    <div class="preblock">
        <span data-role="controlgroup" data-type="horizontal">
            Szenen<br>
            {{ basic.button('Szene_Reinigung_EIN', 'OG.Wohnen.Szene', '', 'scene_cleaning.svg', 0, 'midi') }}
            {{ basic.button('Szene_Reinigung_AUS', 'OG.Wohnen.Szene', '', 'delete', 1, 'midi') }}
            {{ basic.button('Szene_TV_Abend', 'OG.Wohnen.Szene', '', 'scene_scene.svg', 4, 'midi') }}
        </span>
    </div>

Ich hätte gerne nur ein Inline-pic auf dem Button, ohne Text.

Würde mich sehr freuen, wenn mir jemand helfen kann.

Grüße
Thomas

[Tom Bombadil]

Fehlt da nicht ein .svg?

{{ basic.button('Szene_Reinigung_AUS', 'OG.Wohnen.Szene', '', 'delete[COLOR=#FF0000].svg[/COLOR]', 1, 'midi') }}

/tom

[Maxthomas2001]

Nein. Bei inline-pics passt das so.

[smai]

Hallo Thomas

Welche Version nutzt du?
Kannst du mal testen, wie es ohne Controlgroup aussieht?
Oder die pages auf Docu umstellen, auf der Seite von basic.button sind dort alle Kombinationen vorhanden. Zumindest bei mir funktionieren die in 2.8.

Übrigens: Der Begriff inline wird zwar in der Doku verwendet, ist aber eigentlich falsch. Es ist sogar ehere umgekehrt, die SVG-Variante ist inline, die anderen sind background.

Gruss
Stefan

[Maxthomas2001]

Hallo,

ich benutze die Version 2.8. Habe das Image für den Raspberry installiert.
Und Browser hab ich Firefox, Chrome und Chromium im Einsatz. Immer das gleiche.
Ja in der Docu funktioniert alles. Und wenn man das controlgroup raus nimmt, funktioniert es auch
3.jpg

Sieht allerdings nicht sehr schön aus.

Wie könnte man da Abhilfe schaffen?

Grüße
Thomas

[smai]

Das scheint tatsächlich ein alter Bug zu sein. Ich bin nicht mal sicher, ob es an smartVISU oder an jQuery Mobile liegt.
Jedenfalls sollte folgender Code in der visu.css deiner Pages den Fehler beheben:

.ui-controlgroup .ui-btn-icon-notext .ui-btn-inner {
    width: initial;
    height: 100%;
    padding: 0;
}
.ui-controlgroup .ui-btn-icon-notext .ui-btn-inner .ui-icon {
    position: static;
}

In jQuery Mobile 1.4.5 bzw. der kommenden smartVISU-Version ist der Fehler in dieser Form zwar behoben, dafür wird der mittlere Button mit gerundeten Ecken angezeigt anstatt quadratisch.
Ich muss mir noch anschauen, wie sich das umgehen lässt.

[Maxthomas2001]

Hallo,
hat leider nichts geholfen. Aber nicht so tragisch, habe jetzt statt dem inline-pic delete das control_x.svg benutzt. Schaut ja fast genauso aus.
Mich wundert nur, dass ich bisher scheinbar der einzige mit diesem Fehler bin.

Trotzdem vielen Dank für Eure Hilfe! Großen Respekt was ihr hier Ehrenamtlich leistet!

Grüße
Thomas

[smai]

Die svg-icons werden wohl deutlich öfter genutzt. Nachvollziehen konnte ich es ja.
Bei mir hat das funktioniert, vielleicht hättest du im Browser Ctrl+F5 drücken müssen, damit das css neu geladen wird.

[stoepf]

Hatte gerade das gleiche Problem. Bei mir hat der CSS-Code geholfen. Aber wie von smai geschrieben erst nach Ctrl+F5.

Gruß Stefan