Ankündigung

Einklappen
Keine Ankündigung bisher.

Position basic.color nach device.dimmer

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

    Position basic.color nach device.dimmer

    Grüße,

    ich beobachte folgenden Effekt:
    Der Code zum Bild
    HTML-Code:
    <h3>Ambilight T-Träger Küche</h3>
    {{ basic.color(...A) }}
    {{ device.dimmer(...B) }}
    {{ basic.color(...C) }}
    {{ device.dimmer(...D) }} <br/>
    {{ basic.color(...E) }}
    {{ device.dimmer(...F) }}
    Position_color.disc.png
    Der "basic.color(...C)" hat die falsche Position. "basic.color(...A)" hat diesen Effekt nicht. Das "<br/>" vor "basic.color(...E)" behebt auch den Effekt.

    Was macht der Dimmer da?

    #2
    Wenn ich mich recht entsinne, müsste der Text bei den Dimmern eigentlich linksbündig stehen. Hast Du das über die eigene visu.css geändert und ändert sich die Anordnung der basic.color, wenn Du das rückgängig machst?


    Der Dimmer ist ansonsten nur ein <div>, das 100% der Breite des übergeordneten Blocks beansprucht und per css die Verteilung des Platzes auf das Icon, den Slider und die Beschriftung macht. Es gibt in der base.css 2 Klassen:
    - Icon-Anordnungs links (default): class = dimmer_left
    - Icon-Anordnung rechts: class = dimmer_right
    Ich wüsste nicht, wo da noch ein Überlauf in die Folgezeile herkommen sollte, der das basic.color verschiebt.

    Da das <br/> das Problem löst und den vertikalen Abstand dabei noch verschönert, würde ich jetzt nicht tiefer in die Analyse einsteigen.

    Gruß
    Wolfram

    Kommentar


      #3
      Ich habe keine Anpassungen für den Dimmer und den basic.color. Ich kann aber auch gut mit dem <br/> leben.

      Kommentar


        #4
        Probier's mal mit einem
        Code:
        <div style="clear: both;"></div>
        zwischen deinen Widgets.

        Die Zeile sollte dann direkt ins Widget einfließen..?

        Kommentar


          #5
          Zitat von Onkelandy Beitrag anzeigen
          Probier's mal mit einem Code:
          Code:
            
           <div style="clear: both;"></div>
          Funktioniert, und bestimmt sauberer als <br/>

          Kommentar


            #6
            Brauchst Du dann trotzdem noch ein <br/> wegen des vertikalen Abstands?

            Kommentar


              #7
              Es sieht unterschiedlich aus.

              1. <br/>
              2. <div style="clear: both;"></div><br/>
              3. <div style="clear: both;"></div>
              br.png

              Im Detail nur das <br/>: beginnt im Kreis des Schiebereglers. Außerdem ist die senkrechte Linie an der falschen Position wie ohne das <br/> aus meinem ersten Post.
              br.png

              im Detail <div style="clear: both;"></div><br/>: Das <br/> beginnt unter dem Kreis des Schiebereglers. Die senkrechte Position stimmt - sollte die Korrektur sein.
              br+.png

              im Detail nur <div style="clear: both;">: Position stimmt, unterm Kreis und zentriert. Es gibt keinen Abstand, da kein <br/>
              br-.png

              Die Variante 1 zeigt aber, das etwas nach dem Dimmer nicht stimmt.
              Meine Intrepretation: Das <br/> korrigiert den vertikalen Fehler für das nächste Element, hat aber selbst den Fehler (den man logischerweise nicht sieht). Das <div> korrigiert den Fehler, erzeugt aber keinen Abstand (logisch).
              Damit zu Deiner Frage. Es braucht das <br/> für den Abstand

              Kommentar


                #8
                Schuld ist tatsächlich der Kreis des Schiebereglers (die "handle"). Wenn der ganze Dimmer etwas höher gemacht wird, ist das Problem weg. Dann passt der Dimmer aber nicht mehr zu den Größen der anderen Elemente. Auch das zusätzliche <div style="clear: both;"></div> verändert die Höhe leicht.

                Alternative wäre, der Colordisc ein margin-top zu verpassen. Ich schau mir das nochmal in Ruhe an, damit der Baukasten der Bedienelemente nachher auch einen gewissen Standard einhält.

                Danke für die guten Analysen!

                Gruß
                Wolfram

                Kommentar


                  #9
                  Zitat von wvhn Beitrag anzeigen
                  Danke für die guten Analysen!
                  Gerne wieder

                  Kommentar

                  Lädt...
                  X