Hallo zusammen,
ich versuche mein (noch recht spartanisches) Dashboard skalierbar in der Darstellung zu machen und wollte mich daher an Flex wagen.
Allerdings sieht ein mir wichtiges Element dann nicht mehr allzu gut aus: Rotor.
Im Anhang findet ihr das Bild mit Gridster und der erste Flex-Versuch. Dort kann man gut erkennen, dass das Rotor-Element nicht im card Container enthalten ist (vermutlich wird es nicht vom div geerbt).
Habe es schon versucht, dem Rotor-Wrapper Flex beizubringen, allerdings ohne Erfolg:
.rotor .rotor-wrapper {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
}
.rotor li {
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
display: inline-block;
}
.rotor li.is-visible {
opacity: 1;
}
.rotor li.is-hidden {
opacity: 0;
}
.rotor.fade li.is-visible {
animation: fade-in 2.2s;
}
.rotor.fade li.is-hidden {
animation: fade-out 2.2s;
}
Habt ihr eine Idee, wie es klappen könnte?
Gruß
Hukatoni