Icons nebeneinander

[hyper2910]

Hallo,


bis vor kurzem schien alles bei mir zu laufen,

nach irgendeinem Update, waren die Icons aufeinmal untereinander statt nebeneinander.

Was mache ich falsch?

Code Auswählen Erweitern

<li data-row="5" data-col="9" data-sizex="2" data-sizey="1">
        <header>Müll</header>
<div class="top-space inline"><div data-type="symbol" data-background-icon="fa-circle-thin " data-off-background-color="white" data-on-background-color="white" data-device="GelberSack" data-get='STATE' data-off-color="yellow" data-get-on='["off","^[01]$","^[1-9][0-9]|[2-9]$"]' data-icons='["fa-trash warn","fa-trash warn blink","fa-trash warn"]' data-on-colors='["yellow","yellow","yellow"]' class="small"></div>
<div class="top-space inline"><div data-type="symbol" data-background-icon="fa-circle-thin " data-off-background-color="white" data-on-background-color="white" data-device="Papiertonne" data-get='STATE' data-off-color="green" data-get-on='["off","^[01]$","^[1-9][0-9]|[2-9]$"]' data-icons='["fa-trash warn","fa-trash warn blink","fa-trash warn"]' data-on-colors='["blue","blue","blue"]' class="big"></div>
<div class="top-space inline"><div data-type="symbol" data-background-icon="fa-circle-thin " data-off-background-color="white" data-on-background-color="white" data-device="Restmuell" data-get='STATE' data-off-color="grey" data-get-on='["off","^[01]$","^[1-9][0-9]|[2-9]$"]' data-icons='["fa-trash warn","fa-trash warn blink","fa-trash warn"]' data-on-colors='["gray","gray","gray"]' class="big"></div>
</li>

[setstate]

Reicht der Platz noch, für drei Elemente nebeneinder?
Vllt. Musst du jetzt aus dem "big" eher ein "large" machen? 

[hyper2910]

leider nicht,  habe Big, Large, Small ausprobiert, immer untereinander, 


Es war ja am Anfang komplett ok.

[chris1284]

dir fehlt ein abschließendes </div> (oder du lässt das kapselnde div vorne weg und schreibst alles in eine class)

Code Auswählen Erweitern


<li data-row="5" data-col="9" data-sizex="2" data-sizey="1">
        <header>Müll</header>
<div data-type="symbol" data-background-icon="fa-circle-thin " data-off-background-color="white" data-on-background-color="white" data-device="GelberSack" data-get='STATE' data-off-color="yellow" data-get-on='["off","^[01]$","^[1-9][0-9]|[2-9]$"]' data-icons='["fa-trash warn","fa-trash warn blink","fa-trash warn"]' data-on-colors='["yellow","yellow","yellow"]' class="big inline top-space"></div>
<div data-type="symbol" data-background-icon="fa-circle-thin " data-off-background-color="white" data-on-background-color="white" data-device="Papiertonne" data-get='STATE' data-off-color="green" data-get-on='["off","^[01]$","^[1-9][0-9]|[2-9]$"]' data-icons='["fa-trash warn","fa-trash warn blink","fa-trash warn"]' data-on-colors='["blue","blue","blue"]' class="big inline top-space"></div>
<div data-type="symbol" data-background-icon="fa-circle-thin " data-off-background-color="white" data-on-background-color="white" data-device="Restmuell" data-get='STATE' data-off-color="grey" data-get-on='["off","^[01]$","^[1-9][0-9]|[2-9]$"]' data-icons='["fa-trash warn","fa-trash warn blink","fa-trash warn"]' data-on-colors='["gray","gray","gray"]' class="big inline top-space"></div>
</li>


oder noch einfache hbox verwenden!

[hyper2910]

wenn ich da ein abschliessendes </div>  reinmache haut es das ganze Layout durcheinander.

[sinus61]

Es fehlt dann ja auch das einleitende <div> davor. Oder eben alles in ein <div class="hbox"></div> packen und die "inline" aus class rauswerfen.

[moonsorrox]

versuch mal meine Variante mit 4 nebeneinander. Mußt du dir nur eben anpassen auf 3 und die Symbole..

Code Auswählen Erweitern

<div class="sheet">
<div class="row">
<div class="cell" 
data-type="symbol"
data-device="myAbfall"
data-get-warn="(\d+)"
data-get="Restmuell_tage"
data-icons='["fs-dustbin warn","fs-dustbin warn fa-spin","fs-dustbin warn"]'
data-on-colors='["#778899","#778899","#778899"]'
data-get-on='["(1|2|3|4|5|6|7|8|9|10|11|12|13|14|15|16|17)","(0)","(18|19|20|21|22|23|24|25|26|27|28|29|30|31)"]'
data-background-icon="fa-circle-thin"
data-off-background-color="#7A7A7A"
data-on-background-color="#7A7A7A">
</div>

<div class="cell"
data-type="symbol"
data-device="myAbfall"
data-get-warn="(\d+)"
data-get="GelberSackLeichtverpackungen_tage"
data-icons='["fs-bag warn","fs-bag warn fa-spin","fs-bag warn"]'
data-on-colors='["yellow","yellow","yellow"]'
data-get-on='["(1|2|3|4|5|6|7|8|9|10|11|12|13|14|15|16|17)","(0)","(18|19|20|21|22|23|24|25|26|27|28|29|30|31)"]'
data-background-icon="fa-circle-thin"
data-off-background-color="#7A7A7A"
data-on-background-color="#7A7A7A">
</div>
   
<div class="cell"
data-type="symbol"
data-device="myAbfall"
data-get-warn="(\d+)"
data-get="PapierAbfall_tage"
data-icons='["fs-bag warn","fs-bag warn fa-spin","fs-bag warn"]'
data-on-colors='["royalblue","royalblue","royalblue"]'
data-get-on='["(1|2|3|4|5|6|7|8|9|10|11|12|13|14|15|16|17)","(0)","(18|19|20|21|22|23|24|25|26|27|28|29|30|31)"]'
data-background-icon="fa-circle-thin"
data-off-background-color="#7A7A7A"
data-on-background-color="#7A7A7A">
</div>
   
<div class="cell"
data-type="symbol"
data-device="myAbfall"
data-get-warn="(\d+)"
data-get="BioabfallGruengut_tage"
data-icons='["fs-bag warn","fs-bag warn fa-spin","fs-bag warn"]'
data-on-colors='["limegreen","limegreen","limegreen"]'
data-get-on='["(1|2|3|4|5|6|7|8|9|10|11|12|13|14|15|16|17)","(0)","(18|19|20|21|22|23|24|25|26|27|28|29|30|31)"]'
data-background-icon="fa-circle-thin"
data-off-background-color="#7A7A7A"
data-on-background-color="#7A7A7A">
</div>
    </div>
</div>

[chris1284]

wenn ich da ein abschliessendes </div>  reinmache haut es das ganze Layout durcheinander.

dann hast du wo anderst auch noch ein problem

[chris1284]

Es fehlt dann ja auch das einleitende <div> davor

nö, das hat er ja in seiem beispiel in post 1, abe rnicht wieder zugemacht. wenn s im beim zumachen das layout zerhaut hat er dohl wo anderst auch noch eines offen

wenn man aus dem bsp in post 1 mal was übersichtliches baut sieht man dass das ende fehlt

Code Auswählen Erweitern


<li data-row="5" data-col="9" data-sizex="2" data-sizey="1">
        <header>Müll</header>
<div class="top-space inline">
<div data-type="symbol" ... class="small"></div>
<div class="top-space inline">
<div data-type="symbol" ... class="big"></div>
<div class="top-space inline">
<div data-type="symbol" ... class="big"></div>
</li>


[setstate]

3x fehlt das sogar. In jeder Zeile eins

[chris1284]

jab

[hyper2910]

danke, habe es

Code Auswählen Erweitern

<li data-row="5" data-col="9" data-sizex="2" data-sizey="1">
        <header>Müll</header>
<div class="hbox">
<div data-type="symbol" data-background-icon="fa-circle-thin " data-off-background-color="white" data-on-background-color="white" data-device="GelberSack" data-get='STATE' data-off-color="yellow" data-get-on='["off","^[01]$","^[1-9][0-9]|[2-9]$"]' data-icons='["fa-trash warn","fa-trash warn blink","fa-trash warn"]' data-on-colors='["yellow","yellow","yellow"]' class="big"></div>
<div data-type="symbol" data-background-icon="fa-circle-thin " data-off-background-color="white" data-on-background-color="white" data-device="Papiertonne" data-get='STATE' data-off-color="green" data-get-on='["off","^[01]$","^[1-9][0-9]|[2-9]$"]' data-icons='["fa-trash warn","fa-trash warn blink","fa-trash warn"]' data-on-colors='["blue","blue","blue"]' class="big"></div>
<div data-type="symbol" data-background-icon="fa-circle-thin " data-off-background-color="white" data-on-background-color="white" data-device="Restmuell" data-get='STATE' data-off-color="grey" data-get-on='["off","^[01]$","^[1-9][0-9]|[2-9]$"]' data-icons='["fa-trash warn","fa-trash warn blink","fa-trash warn"]' data-on-colors='["gray","gray","gray"]' class="big"></div>
</li>


[setstate]

supi, aber es fehlt wieder der Abschluss vor dem </li>

ein </div>

Code Auswählen Erweitern


<li data-row="5" data-col="9" data-sizex="2" data-sizey="1">
        <header>Müll</header>
<div class="hbox">
   <div data-type="....class="big"></div>
     <div data-type="....' class="big"></div>
   <div data-type="... class="big"></div>
                </div>
</li>


[hyper2910]

es funktioniert aber!

[setstate]

Die Browser korrigiert vieles, aber genau so etwas kann die Quelle von "Alles verschoben", "Warum ist das nicht nebeneinander" usw. sein