Widget Div-Container so klein als möglich, wie?

Tobias · 25 Juli 2016, 07:43:27

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:

Code Auswählen

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

setstate · 25 Juli 2016, 09:50:33

Hast du schon

Code Auswählen

class="left-narrow" am Symbol Widget probiert?

Es gibt noch left-narrow-2, right-narrow und right-narrow-2

Tobias · 25 Juli 2016, 10:00:10

Hab ich, damit rutscht aber das Widget nur mehr nach links/rechts/oben

Der Freiraum um das Symbol bleibt gleich

setstate · 25 Juli 2016, 10:08:00

Okay, muss ich dann erst mal durchspielen, was machbar ist ...

laberlaib · 25 Juli 2016, 11:45:55

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:

Code Auswählen


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

setstate · 25 Juli 2016, 23:46:27

Mit left-narrow-10 und right-narrow-10 wird es enger

Code Auswählen


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

Tobias · 27 Juli 2016, 12:06:03

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?

setstate · 27 Juli 2016, 13:08:55

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.