cell, container?

[choetzu]

Hallo,

Ich finde das Wiki von tablet ui wirklich gut. Auch auf github wird man oft fündig. Aber trotzdem bin ich irgendwie zu blöd die Bedeutung sowie Konfigurationsmöglichkeiten von class=cell und class=container zu finden. Tante Google versagt hier auch. Kann mir bitte jemand auf die Sprünge helfen? Danke.

Lg c

[setstate]

cell und container sind nur selbst definierte CSS class names. Man muss dann im CSS File nachsehen, welche Styleregeln dadurch angezogen werden.

Code Auswählen Erweitern

.cell {
    margin:10px 10px !important;
    width: auto;
    text-align: center;
    vertical-align: middle;
}


Wenn man einem Widget also "cell" mitgibt, wird etwas Platz ringsum geschaffen und versucht es zu zentrieren.

Code Auswählen Erweitern

.container{

}
.container.round{ border-radius: 17px;}
.container.circular{ border-radius: 30px;}
.container.margin{ margin: 7px; }
.container.margin>.fa{ margin-left: 7px; }
.container.padding{ padding: 7px; }


Bei Container sieht man, das nur Regeln hinterlegt sind für container + einer weiteren Eigenschaft. round zum Beispiel. Damit kann man Eigenschaften zusammenpuzzlen: container + round + bg-blue -> ergibt eine blaues Feld mit runden Ecken.

Die gängigen Desktopbrowser haben Entwicklertools an Board. Da gibt es einen Styleeditor, mit dem man schön sieht, welches Style jedes Element hat, über welche Klasse das gezogen wird und kann einzelne Eigenschaften an und ab schalten, um zu sehen, welche Auswirkungen die haben. 

[choetzu]

hallo setstate, herzlichen dank für deine Erläuterungen. Jetzt ist alles klar.. Ich konnte die neuesten Erkenntnisse bereits anwenden. Super, danke.

Wo ich aber nicht weiterkomme ist bei folgendem. Nachdem ich meine Sliders in class=cell gepackt habe, schaffe ich es nicht die Labels darunter zu zentrieren. Weder mit center noch mit cell. Siehe Bild.

hier mein code dazu

Code Auswählen Erweitern

<div class="cell inline right-space-2x">
        <div data-type="slider"
      data-device='Kueche_D_FUD61'
      data-min="0"
      data-max="100"
      data-height="80">
</div> 
  <div data-type="label" class="cell small thick">Küche</div>
        </div>
       
<div class="cell inline right-space-2x">
          <div data-type="slider"
      data-device='TV_D_FUD61'
      data-min="0"
      data-max="100"
      data-height="80">
</div>   
  <div data-type="label" class="cell small thick">TV</div>
        </div>
       
<div class="cell inline">
          <div data-type="slider"
      data-device='WZ_D_FUD61'
      data-min="0"
      data-max="100"
      data-height="80">
</div> 
  <div data-type="label" class="cell small thick">WZ</div>
  </div>


woran könnte das liegen?

[choetzu]

hallo, kann mir hier jemand helfen? Ich habe so ziemlich alles versucht, was ich mit meinen begrenzten HTML Kenntnissen kenne. Jedoch erfolglos... hmm.. Danke für eure Hilfe..

[setstate]

Ich helfe dir sofort ...
ich schaue es mir an und melde mich wieder

Erkenntnis:
Wenn man beim Div, was Slider und Text beinhaltet, den Hindergrund einfärbt, sieht man schön, dass der Slider nicht mittig sitzt, nicht der Text

[choetzu]

Danke für deine Mühe, das hilt zu verstehen wo der Fehler liegt. Ich habe jetzt auch mich Chrome rausgefunden, wie man mit den Entwicklertools entsprechend Elemente anklicken kann.. (Wow, ich weiss . Aber was kann ich mit der Info anfangen? Es ist nicht mittig, das habe ich nun auch gesehen, doch wo mache den Slider mittig? Mit class="centered" beim slider div geht es nicht... Wo dann? Danke für dich Hilfe

Lg c

[setstate]

Ich bin noch dabei, hatte nur anderes vor gestern.
Beim slider gibt es feste margin-left und margin-right werte, die gilt es loszuwerden bzw. gegen "auto" auszutauschen.

[setstate]

probiere mal das in der css/fhem-tablet-ui.css zu ändern

vorher

Code Auswählen Erweitern


.range-container.slider_vertical, .range-container.level_vertical{
    margin:10px 0px 0px 20% !important;
}


nacher

Code Auswählen Erweitern


.range-container.slider_vertical, .range-container.level_vertical{
    margin: 20px auto 20px !important;
    padding: 0px !important;
}


[choetzu]

hallo setstate... Herrlich!! Jetzt sind die Texte schön zentriert! Herzlichen Dank.. auf das wär ich nie gekommen, weil doch meine CSS Kenntnisse gleich 0 sind... ich arbeite daran

kann man eigentlich den Zellen (cell) eine fixe Grösse geben? Jetzt werden die Beschriftungen (Küche, TV, Wohnzimmer) je nach Länge nicht auf die selbe Höhe geschrieben, und auch der Abstand links zum linken Slider (Küche) und der Abstand rechts zum rechten Slider (Wohnzimmer) sind unterschiedlich, dies aufgrund der Länge der Beschriftung... Siehe Bild anbei.

Hier noch der aktuelle Code..

Code Auswählen Erweitern

<div class="cell inline left">
        <div data-type="slider"
      data-device='Kueche_D_FUD61'
      data-min="0"
      data-max="100"
      data-height="90"
      class="value">
      </div>
      </br>
  <div class="cell small">Küche</div>
        </div>
       
<div class="cell inline centered">
          <div data-type="slider"
      data-device='TV_D_FUD61'
      data-min="0"
      data-max="100"
      data-height="90"
      class="value">
</div>
</br>
  <div class="cell small">TV</div>
        </div>
       
<div class="cell inline right">
          <div data-type="slider"
      data-device='WZ_D_FUD61'
      data-min="0"
      data-max="100"
      data-height="90"
      class="value">
</div>
</br>
  <div class="cell small">Wohnzimmer</div>
  </div>

[setstate]

Ich würde das so machen:

Code Auswählen Erweitern


        <div class="col-1-3">
                <div data-type="slider"
                        data-device='Kueche_D_FUD61'
                        data-min="0"
                        data-max="100"
                        data-height="90"
                        class="value">
                </div>
                <div class="top-space-3 small">Küche</div>
        </div>
        <div class="col-1-3">
                <div data-type="slider"
                        data-device='TV_D_FUD61'
                        data-min="0"
                        data-max="100"
                        data-height="90"
                        class="value">
                </div>
                <div class="top-space-3 small">TV</div>
        </div>
        <div class="col-1-3">
                <div data-type="slider"
                        data-device='WZ_D_FUD61'
                        data-min="0"
                        data-max="100"
                        data-height="90"
                        class="value">
                </div>
                <div class="top-space-3 small">Wohnzimmer</div>
        </div>


In drei Spalten aufteilen und die Labels mit etwas Abstand oben anordnen.
Cell ist eine Klasse aus den FTUI Anfangszeiten, die ich selbst so nicht mehr nutze oder empfehlen würde.

[choetzu]

YES!!!!!!! Das sind nun wirklich super aus!! Herzlichen Dank, ich bin rundum glücklich... Super Hilfe, das ist nicht selbstverständlich. Danke setstate..

Ich habe noch eine allerletzte Frage, dann lass ich dich (vorläufig) in Ruhe: Ich habe all meine Schaltzustände und Werte in ein Swiper Widget mit total 3 Seiten eingebunden. Also, am Schluss habe ich eine einzige index-mobile.html Datei mit 3 Swiper-Seite.. wenn ich diese index-mobile.html nun aufrufe, wird immer die ganze Seite mit allen 3-Swiper-Seiten geladen, was ja eigentlich logisch ist.. Ist es aber u.U. möglich dass die Werte auf Seite 2-3 des Swiper-Widgets erst dann geladen werden, sobald ich sie auswähle. Geht das?

[setstate]

Die Änderung bei den Slider Margins werde ich so in die eval-Version übernehmen. Das kann sich bestimmt auf einige auswirken, die Slider verschieben sich etwas, aber mit margin-left und margin-right 'auto' ist der bessere Weg, anstatt Festwerte.

Zu deinem Swiper: nein, dieses Widget unterstützt kein Lazy-Loading. Nur mit dem Seiten-Starter "pagebutton" und "link" kann man einfach nur Teile der Seite austauschen. Siehe Beispiel hier: https://github.com/knowthelist/fhem-tablet-ui/blob/eval/www/tablet_eval/index_nav_mobil.html