Hallo,
ich habe bisher immer das Attribut "top-narrow" (class="top-narrow") verwendet, um Elemte dicht an das darüberliegende Element zu bekommen.
Seit 2.5 wird "top-narrow" jedoch ignoriert ("narrow" geht noch).
Kennt jemand ne alternative um den Vertikalen Abstand zu minimieren?
Gruß,
H.
style="margin-top:-10px" z.B. für 10 pixel weniger.
top-margin macht auch nix anderes, nur übersichtlicher im Code. Deshalb weiß ich nicht, warum es nicht funktionieren soll. Style-Attribute haben natürlich vorang vor CSS Classes. Da könnte sich etwas davor gemogelt haben. Ich werde mal den Align Klassen ein important verpassen, damit sie hoch wirksam werden. Style-Attribute im HTML ist immer eine schlechte Lösung, weil es die Trennung von Inhalt und Style aufhebt. Damit verliert man Vorteile wie: individuelles Layout pro Device, Bildschirmauflösung, Style-Schema oder Wiederverwendbarkeit von HTML Code.
Für das schnelle Erfolgserlebnis ist Style ok.
Du hast mit Style sicherlich Recht und mein Wissen in Sachen HTML ist begrenzt, aber welche andere Möglichkeit hat man wenn man etwas genauer positionieren möchte?
I had the same probleem with top-narrow not doing exactly what I wanted. "height-narrow" did make the situation already look a lot better. I didn't want to go for style changes as a bit messy in the code.
Grundsätzlich geht top-narrow und hat schon !important, sollte also funktionieren.
Gebt mir bitte mal ein Beispiel, wo es nicht klappt. am besten bis zum body Knoten hoch
Hier mal ein Beispiel welches ich nur mit style und margin-x hinbekomme...
<!-- Garagentor -->
<li data-row="7" data-col="7" data-sizex="1" data-sizey="1">
<header><div style="color:#696969; font-size:135%">GARAGE</div></header>
<div class="container center">
<div class="inline">
<div class="vbox" style="margin-left:10px">
<div class="thin small" style="margin-left:-20px; margin-right:-20px" data-type="symbol"
data-device="Garagentor_Status_Sw_03"
data-icons='["fa-lightbulb-o","fa-lightbulb-o"]'
data-on-colors='["yellow","grey"]'
data-get-on='["closed","open"]'></div>
<div style="font-family:/*Windows*/Arial Narrow, /*Android*/sans-serif-condensed; font-size:100%" data-type="label"
data-device="Garage_TempRH_Sensor"
data-get="humidity"
data-unit=" %"
data-fix="0"></div>
<div style="font-family:/*Windows*/Arial Narrow, /*Android*/sans-serif-condensed; font-size:100%" data-type="label"
data-device="Garage_TempRH_Sensor"
data-get="temperature"
data-unit=" °C"
data-fix="1"></div>
</div>
</div>
<div class="thin" style="font-size:125%; margin-left:10px; margin-top:6px" data-type="symbol"
data-device="dGaragentor_Status"
data-get-on='["green","orange","red"]'
data-icons='["oa-fts_garage_door_100","oa-fts_garage_door_50 blink","oa-fts_garage_door_10 blink"]'
data-on-colors='["lightgrey","#FD5F00","#FF0101"]'></div>
<div class="inline" data-type="popup" data-mode="fade" data-height="140px" data-width="200px">
<div class="thin" style="font-size:160%; margin-left:-74px; margin-top:3px" data-type="push"
data-set-on="-"
data-icon=""
data-device="dFTUIdummy"></div>
<div class="dialog">
<header><div style="color:#696969; font-size:200%; line-height:30px">GARAGE</div></header>
<div class="inline top-space" style="font-size:160%" data-type="push"
data-device="Garagentor_Schaltaktor_Sw_01"
data-off-color="#D3D3D3"
data-icon="fa-chevron-up"
data-on-background-color="#00BFFF"
data-background-icon="fa-square-o"
data-set-on="on-for-timer 1"
onclick="$('.dialog-close').trigger('click');"></div>
<div class="inline top-space" style="font-size:160%" data-type="push"
data-device="Garagentor_Schaltaktor_Sw_02"
data-off-color="#D3D3D3"
data-icon="fa-chevron-down"
data-on-background-color="#00BFFF"
data-background-icon="fa-square-o"
data-set-on="on-for-timer 1"
onclick="$('.dialog-close').trigger('click');"></div>
</div>
</div>
</div>
</li>
Sorry can't give you code examples now as I'm travelling and don't have access to my local network. When I used top-narrow my switch icon started overlapping with header of my cell. The whole appearance was quite messy. I thought to be smart and tried bottom-narrow, without effect but then height-narrow was close enough. If you want I can give an example next week Monday but since there is nothing special in it then defining a few cells with switches it should be easy to reproduce.
sorry für meine späte Antwort,
ich hab jetzt nochmal ein wenig rumprobiert und das Problem tritt bei mir wohl nur auf, wenn ich mit "inline" mehre Widgets nebeneinander platziere und bei einem Widget den Anstand verringern will (dass kann natürlich auch gewollt sein?)
z.B.:
<body>
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="3" data-sizey="2">
<div class="cell container bg-gray round">test</div>
<div class="inline narrow" data-type="switch"></div>
<div class="inline" data-type="switch"></div>
<div class="cell container bg-gray round">test</div>
<div class="inline" data-type="switch" ></div>
<div class="top-narrow inline" data-type="switch" ></div>
<div class="cell container bg-gray round">test</div>
</li>
</ul>
</div>
</body>
Was mir noch aufgefallen ist, das mit "top-narrow" das Widget immmer ein wenig außermittig nach links verschoben wird (siehe Bild), z.B. bei:
<body>
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="3" data-sizey="2">
<div class="cell container bg-gray round">test</div>
<div data-type="switch"></div>
<div class="cell container bg-gray round">test</div>
<div class="narrow" data-type="switch" ></div>
<div class="cell container bg-gray round">test</div>
<div class="top-narrow" data-type="switch" ></div>
<div class="cell container bg-gray round">test</div>
</li>
</ul>
</div>
</body>
PS: Ist es eig. gewollt das bei "narrow" auch der untere Abstand verkleinert wird?
Gruß,
H
Danke für den Demonstrator, schaue ich mir an und suche eine Lösung
Frage: Warum will man bei inline, ein Element höher haben?
Wenn beide höher sollen geht das besser so
<div class="top-narrow">
<div class="inline" data-type="switch" ></div>
<div class="inline" data-type="switch" ></div>
</div>
oder so
<div class="inline top-narrow" data-type="switch"></div>
<div class="inline top-narrow" data-type="switch"></div>
Zitat von: setstate am 04 Februar 2017, 22:53:39
Frage: Warum will man bei inline, ein Element höher haben?
Ich hab dies bisher verwendet um zwei Icons mit unterschiedlicher Größe nebeneinader darzustellen und das kleinere Icon weiter oben zu plazieren (finde das sieht besser aus). Hab aber mit Class="top" einen adäquaten ersatz für top-narrow gefunden :)