Hi,
ich möchte mehrere Info-Symbole nebeneinander packen, bei wenig Platz.
Problem ist bei mir das ich es nicht hinbekomme, den DivContainer des Widgets so zu konfigurieren, das wirklich nur das Symbol dargestellt wird, ohne Innen- ohne Außenabstand
Hier mal meine Def: <div class="col-1-3 right-align squareborder">
<div data-type="symbol"
class="small squareborder"
data-device="HZ_EZ"
data-get="battery"
data-icons='["oa-measure_battery_100","oa-measure_battery_25"]'
data-get-on='["ok","low"]'
data-colors='["SeaGreen","IndianRed"]'>
</div>
</div>
Im Screenshot sieht man was ich meine...
Die größere Box ist meine Column (col-1-3). Darin, rechte Seite, soll das Batteriesymbol. Die Box der Batterie ist aber mit Innen/oder Außenabständen versehen sodass ich rechts daneben kein drittes Widget mehr hineinbekomme. Stattdessen wird das dritte Widget dann in der nächsten Zeile dargestellt. Da hift auch kein "inline".
Ich denke, schuld ist der unnötige Abstand... Wie bekomme ich den weg?
Hast du schon class="left-narrow" am Symbol Widget probiert?
Es gibt noch left-narrow-2, right-narrow und right-narrow-2
Hab ich, damit rutscht aber das Widget nur mehr nach links/rechts/oben
Der Freiraum um das Symbol bleibt gleich :(
Okay, muss ich dann erst mal durchspielen, was machbar ist ...
Ich glaube, dieses Problem hatte ich hier
https://forum.fhem.de/index.php/topic,55877.0.html
mit dem Slider. Wenn ich da mal per css mir die obere Grenze des DIVs anzeigen lassen habe, dann war das auch riesen groß.
Meine Lösung derzeit ist das übereinanderlegen von DIVs per negativem margin, also negativer Abstand zwischen DIVs.
Also in der User-CSS:
.slider_horizntal.narrow{
margin-top:-30px !important;
}
bzw. bei Dir halt eine andere Class, die du dann dem Battery-DIV zuweist und auch nicht "margin-top" sondern "margin-left"
Keine Ahnung, ob das "gutes" HTML/CSS ist und v.a. wenn man überlagernde Schalter hat, wie sich das auf den "Druckpunkt" auswirkt, aber zum reinen Darstellen sollte das ausreichen - n Versuch ists wert.
Mit left-narrow-10 und right-narrow-10 wird es enger
<body>
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
<header>Narrow</header>
<div class="squareborder bg-green">
<div data-type="symbol"
class="small inline left-narrow-10 right-narrow-10"
data-device="HZ_EZ"
data-get="battery"
data-icons='["oa-measure_battery_100","oa-measure_battery_25"]'
data-get-on='["ok","low"]'
data-colors='["SeaGreen","IndianRed"]'>
</div>
<div data-type="symbol"
class="small inline left-narrow-10 right-narrow-10"
data-device="HZ_EZ"
data-get="battery"
data-icons='["oa-measure_battery_100","oa-measure_battery_25"]'
data-get-on='["ok","low"]'
data-colors='["SeaGreen","IndianRed"]'>
</div>
<div data-type="symbol"
class="small inline left-narrow-10 right-narrow-10"
data-device="HZ_EZ"
data-get="battery"
data-icons='["oa-measure_battery_100","oa-measure_battery_25"]'
data-get-on='["ok","low"]'
data-colors='["SeaGreen","IndianRed"]'>
</div>
</div>
</li>
</ul>
</div>
</body>
Danke,
damit werden die divs aber nicht kleiner, sie überlagern sich nur... sieht man, wenn man jedem div noch ein "squareborder" mitgibt.
Da frage ich mich aber, woher diese Abstände innerhalb der divs eigentlich kommen?
Aber Hauptsache das Ergebnis passt ;)
Hintergrund: die Font Awesome Icons habe eine feste Weite und Höhe von 2em definiert. Nur damit kann man ordentlich das Icon mit dem Background-Icon übereinander positionieren und gleichzeitig skalieren.