Style rules 📜
Except for the size of the Items, there is no need to add styles to the DOM elements generated by the components because each component has a predefined style to implement. However, if you need to add a style for a special case, it is useful to know what you can and what you cannot do.
Z-indexing 💤
Some events can cause Items to overlap each other, so it is useful to set a z-index to define an order of priority and not cause strange overlaps.
.muuri-item {
z-index: 1;
}
.muuri-item-dragging {
z-index: 3;
}
.muuri-item-releasing {
z-index: 2;
}
.muuri-item-hidden {
z-index: 0;
}
MuuriComponent 📦
- The MuuriComponent element must be "positioned" meaning that it's CSS position property must be set to
relative,absoluteorfixed. If no position is provided the default one isrelative. - Never ever set
overflow: auto;oroverflow: scroll;to the element. You can set the overflow property in a parent element.
.muuri {
position: relative;
}
Item 🛠️
- The Item (outer) elements must have their CSS position set to
absoluteand their display property set toblock, these properties are set by the MuuriComponent. - The Item (outer) elements must not have any CSS
transitionsoranimationsapplied to them.
Style implementation 👗
Here is a simple example.
const Item = () => (
<div class="item">
<div class="item-content">I'm an item.</div>
</div>
);
.item {
width: 100px;
height: 100px;
margin: 5px;
z-index: 1;
}
.item.muuri-item-dragging {
z-index: 3;
}
.item.muuri-item-releasing {
z-index: 2;
}
.item.muuri-item-hidden {
z-index: 0;
}
.item-content {
position: relative;
width: 100%;
height: 100%;
}