- √ - Breite von basic.flip

[offline]

Hallo zusammen,

ich habe in meiner Visu einige basic.flip widgets mit eigenen Texten für on bzw. off. Leider sind die Texte länger, als das widget in der Anzeige breit ist. Wie kann ich einzelne basic.flip Widgets breiter machen?

Grüße
Thomas

[bmx]

Moin,

Du schaust Dir die Struktur in HTML an und setzt dann einen CSS Selektor für das Element zusammen und definierst für diese Element dann die Breite neu. Das ganze speicherst Du in der visu.css in Deinem Pages Unterordner.

Beispiel:

HTML

        <div data-role="collapsible" data-collapsed="false">
            <h3>Deckenlicht</h3>
            <div>{{ basic.flip('ArbeitszimmerOG.DeckenlichtA', 'ArbeitszimmerOG.Deckenlicht', 'An', 'Aus') }}</div>
            <div>{{ basic.flip('ArbeitszimmerOG.DeckenlichtB', 'ArbeitszimmerOG.Deckenlicht', 'An', 'Aus') }}</div>
            <div>{{ basic.flip('ArbeitszimmerOG.DeckenlichtC', 'ArbeitszimmerOG.Deckenlicht', 'An', 'Aus') }}</div>
            <div>{{ basic.flip('ArbeitszimmerOG.DeckenlichtD', 'ArbeitszimmerOG.Deckenlicht', 'An', 'Aus') }}</div>
        </div>

Visu

#ArbeitszimmerOG.DeckenlichtC ~ .ui-slider {
    width: 350px !important;
}

Die CSS sorgt salopp gesagt dafür das sich ein Slider, der einem Objekt mit ID ArbeitszimmerOG.DeckenlichtC folgt und sich auf der gleichen Objektebene befindet dann eben breiter wird. (Daher auch z.B. das einrahmen durch die <div>.

Sieht dann so aus:
WidthOfFlip.png

Natürlich kannst Du dann auch statt 350px besser etwas relatives schreiben, z.B. 100% um das umgebende Kästchen komplett in der Breite auszufüllen.

Gruß,
Bernd

[offline]

Nabend Bernd,

dein Beispiel hat zwar bei mir so nicht direkt funktioniert, aber du hast mich auf die richtige Fährte gebracht.

Bei mir baut Smartvisu den Seitennamen in die Item-Id mit ein, außerdem werden die Punkte in der Item-Id durch Unterstriche ersetzt.

Zu einem

{{ basic.flip('arbeit.raffstore.komfortsperren', 'arbeit.raffstore.komfortsperren', 'Gesperrt', 'Aktiv') }}

in der datei room_e2_arbeitszimmer.html muss ich also schreiben

#room_e2_arbeitszimmer-arbeit_raffstore_komfortsperren ~ .ui-slider {
        width:120px !important;
}

Damit funktioniert es bei mir.

Grüße
Thomas