Position basic.color nach device.dimmer

[NGem]

Grüße,

ich beobachte folgenden Effekt:
Der Code zum Bild

<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?

[wvhn]

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

[NGem]

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

[Onkelandy]

Probier's mal mit einem

<div style="clear: both;"></div>

zwischen deinen Widgets.

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

[NGem]

Probier's mal mit einem Code:

  
 <div style="clear: both;"></div>

Funktioniert, und bestimmt sauberer als <br/>

[wvhn]

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

[NGem]

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

[wvhn]

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

[NGem]

Danke für die guten Analysen!

Gerne wieder