Fixed select handle display failure -- Jetzt ist alles zerstört

roman1528 · 15 September 2017, 17:22:51

Moin.

Nun muss auch ich mich tatsächlich mal wieder zu Wort melden.

Habe mir gerade das Update gezogen und muss sagen dass der select-Widget-Handle jetzt richtig gut aussieht...
Dafür hat es aber mein gesamtes layout gesprengt!!! Zeilenabstände sind völlig aus der Spur!
Kannst du das irgendwie wieder hin biegen setstate???

Lade jetzt erstmal mein Backup

Grüße^^

moonsorrox · 15 September 2017, 18:01:27

Hallo Roman da ich auch Auszüge aus deinem Layout nutze...
vielleicht liegt es einfach nur an den Höhen... gib mal in deine user.css folgendes ein

Code Auswählen

/* Section Korrektur für die Höhen */
section {
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 1.6em;
}

damit sieht es bei mir wieder gut aus

roman1528 · 15 September 2017, 19:43:53

Zitat von: moonsorrox am 15 September 2017, 18:01:27
Hallo Roman da ich auch Auszüge aus deinem Layout nutze...
vielleicht liegt es einfach nur an den Höhen... gib mal in deine user.css folgendes ein

Code Auswählen Erweitern
/* Section Korrektur für die Höhen */ section { padding-top: 10px; padding-bottom: 10px; line-height: 1.6em; }
damit sieht es bei mir wieder gut aus

DANKE!

EDIT!

Teillösung^^

Label-Widgets sind z.B. auch aus der Spur (Höhe,Abstand). Ich habe einfach keine Zeit und keine Lust nach jedem dritten Update die ganze FTUI neu zu designen....

jemu75 · 16 September 2017, 09:50:40

Zitat von: moonsorrox am 15 September 2017, 18:01:27
Hallo Roman da ich auch Auszüge aus deinem Layout nutze...
vielleicht liegt es einfach nur an den Höhen... gib mal in deine user.css folgendes ein

Code Auswählen Erweitern
/* Section Korrektur für die Höhen */ section { padding-top: 10px; padding-bottom: 10px; line-height: 1.6em; }
damit sieht es bei mir wieder gut aus

kenne ich irgendwo her

Ich habe mein Layout jetzt auch noch mal genau gecheckt und denke, es ist nur eine Teillösung, da bei mir auch noch einiges verschoben ist. Eine richtigen Lösungsansatz habe ich aber auch noch nicht. Macht ja wenig Sinn, alles was setstate baut wieder zu umgehen.

Jojo11 · 16 September 2017, 20:26:17

Kann ich bestätigen. Letztes Update hat mir mal wieder alles zerschossen $:-\$
Lessons learned: Nur updaten, wenn ein frisches Backup bereit liegt

schöne Grüße
Jo

devil77 · 17 September 2017, 10:55:49

Hallo, das Problem ist das mit der FTUI CSS versucht wird soviel wie möglich abzudecken.
Am einfachsten ist es wenn man ein fertiges Layout hat die FTUI css untern einem anderem Namen abzuspeichern und dann nur diese
im eigenen Layout einbinden. So kann es Updates geben ohne das das eigene Layout zerschossen wird.
Zu der vorgeschlagenen Lösung wird ich eher folgendes machen und in die fhem-tablet-ui-user.css eintragen

Code Auswählen

/* Section Korrektur für die Höhen */
section {
    min-height: auto !important;
    line-height: normal !important;
}

setstate · 17 September 2017, 12:09:38

Auto funktioniert aber nur bei einer bestimmten Font-Größe.

Bei dem Beispiel zum Beispiel kann man das nicht benutzen

Code Auswählen


<body>
    <main id="panel" class="">
        <div class="">
            <section>
                <div class="col-2"></div>
                <div class="col-40 left-align">Normal Size</div>
                <div class="col-55 right-align" data-type="switch" data-device="dummy1"></div>
            </section>
            <section>
                <div class="col-2"></div>
                <div class="col-40 left-align">Normal Size</div>
                <div class="col-55 right-align" data-type="select" data-device="AvReceiverZ2" data-list="inputList" data-delimiter="," data-get="input" data-set="input"></div>
            </section>
        </div>
        <div class="xl">
            <section>
                <div class="col-2"></div>
                <div class="col-40 left-align">Big Size</div>
                <div class="col-55 right-align" data-type="switch" data-device="dummy1"></div>
            </section>
            <section>
                <div class="col-2"></div>
                <div class="col-40 left-align">Big Size</div>
                <div class="col-55 right-align" data-type="switch" data-device="dummy1"></div>
            </section>
            <div class="xxl">
                <section>
                    <div class="col-2"></div>
                    <div class="col-40 left-align">Bigger Size</div>
                    <div class="col-55 right-align" data-type="switch" data-device="dummy1"></div>
                </section>
                <section>
                    <div class="col-2"></div>
                    <div class="col-40 left-align">Bigger Size</div>
                    <div class="col-55 right-align" data-type="switch" data-device="dummy1"></div>
                </section>
            </div>
        </div>
    </main>
</body>

Wie sieht bei euch den der Teil zwischen den 'section' aus?
Bitte mal in dieses Beispiel von mir exemplarisch einsetzen, damit ich es testen kann

Jojo11 · 19 September 2017, 19:46:34

Hallo setstate,

folgender code wird bei mir nach dem Update anders dargestellt:

Code Auswählen


<!DOCTYPE html>
<html>
<head></head>
<body>
    <div class="page" id="content2">
         <section>
           <div class="hbox items-space-between">
              <div class="left-align left-space black">
               <div class="bold large">Flur unten Ecklampe</div>
               <div data-type="label" data-device="Flur_unten_Licht1" data-get="state" data-substitution="toDate().ddmm()" class="timestamp left-align inline"></div>
               <div data-type="label" data-device="Flur_unten_Licht1" data-get="state" data-substitution="toDate().hhmm()" class="timestamp left-align inline"></div>
               <div data-type="label" data-device="FuL01_AN_01" data-get="state" data-post-text=">&nbsp;&nbsp;" data-part="Next:\s(\d{2}:\d{2}).*" class="left-align inline gray"></div>
               <div data-type="label" data-device="FuL01_AUS_01" data-get="state" data-post-text=";" data-part="Next:\s(\d{2}:\d{2}).*" class="left-narrow left-align inline gray"></div>
               <div data-type="label" data-device="FuL01_AN_03" data-get="state" data-part="Next:\s(\d{2}:\d{2}).*" data-post-text=">&nbsp;&nbsp;" class="left-align inline gray"></div>
               <div data-type="label" data-device="FuL01_AUS_02" data-get="state" data-part="Next:\s(\d{2}:\d{2}).*" class="left-narrow left-align inline gray"></div>
              </div>
              <div data-type="switch" data-icon="oa2-light_light" data-device="Flur_unten_Licht1" class="right-space"></div>
            </div>
         
            <div class="hbox items-space-between">
              <div class="left-align left-space black">
               <div class="bold large">Flur unten Decke</div>
               <div data-type="label" data-device="Flur_unten_Decke" data-get="state" data-substitution="toDate().ddmm()" class="timestamp left-align inline"></div>
               <div data-type="label" data-device="Flur_unten_Decke" data-get="state" data-substitution="toDate().hhmm()" class="timestamp left-align inline"></div>
              </div>
              <div data-type="switch" data-icon="oa2-light_ceiling_light" data-device="Flur_unten_Decke" class="right-space"></div>    
            </div>
            
            <div class="hbox items-space-between">
              <div class="left-align left-space black">
               <div class="bold large">Flur oben Decke</div>
               <div data-type="label" data-device="Flur_oben_Decke" data-get="state" data-substitution="toDate().ddmm()" class="timestamp left-align inline"></div>
               <div data-type="label" data-device="Flur_oben_Decke" data-get="state" data-substitution="toDate().hhmm()" class="timestamp left-align inline"></div>
              </div>
              <div data-type="switch" data-icon="oa2-light_ceiling_light" data-device="Flur_oben_Decke" class="right-space"></div>    
            </div>

usw...

Vorher ist die 2b.png. Ursache muss in der fhem-tablet-ui.css bzw. fhem-tablet-ui.min.css liegen. Nach Austausch sieht es wieder aus wie vorher.

schöne Grüße
Jo

setstate · 19 September 2017, 20:13:46

Es ist auch gedacht, pro Zeile (ein Button rechts) eine Section zu verbauen und nicht mehrere Zeilen innerhalb einer Section.

Jojo11 · 19 September 2017, 21:30:30

Ah ok, das war mir nicht bewusst. Kann ich denn die Striche zwischen den sections unterdrücken?

Schöne Grüße
Jo

setstate · 20 September 2017, 06:41:05

<section> ganz weglassen, respektive durch <div> ersetzen