I need help with displaying a list on the user's screen that can be reordered by drag and drop. Currently, the drag and drop functionality is working fine.
However, I want to display the list in multiple columns as sometimes there are too many options to fit in a single column, and the number of elements can vary.
I tried using flexbox to achieve this, but I am facing an issue where the list is not centered as the flex container dimensions are not adjusting to fit its content.
Here is the CSS code snippet I am using:
.params-order.overlay {
display: flex;
flex-direction: column;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(30,30,30, 0.8);
z-index: 999999;
justify-content: center;
align-items: center;
}
.overlay-title {
margin: 5% 5% 2%;
color: white;
text-align: center;
text-shadow: 2px 2px 2px black;
}
.params-list {
display: inline-flex;
margin: 5%;
flex-flow: column wrap;
justify-content: center;
align-items: center;
}
.params-list-item {
background-color: rgb(240, 240, 240);
border-radius: 5px;
padding: 5px 15px 5px 25px;
margin: 10px;
list-style-type: none;
width: 200px;
position: relative;
font-size: 1.4em;
cursor: move;
}
.params-list-item::before {
content: '';
position: absolute;
left: 7px;
top: 19%;
height: 64%;
width: 6px;
border: 2px dotted #999;
border-top-width: 0;
border-bottom-width: 0;
box-shadow: none;
}Here is a snippet of the HTML code I am using:
<div class="overlay params-order">
<h3 class="overlay-title">Overlay title</h3>
<ul class="params-list">
<li class="params-list-item">Draggable 1</li>
<li class="params-list-item">Draggable 2</li>
<li class="params-list-item">Draggable 3</li>
<li class="params-list-item">Draggable 4</li>
<li class="params-list-item">Draggable 5</li>
<li class="params-list-item">Draggable 6</li>
<li class="params-list-item">Draggable 7</li>
<li class="params-list-item">Draggable 8</li>
<li class="params-list-item">Draggable 9</li>
<li class="params-list-item">Draggable 10</li>
<li class="params-list-item">Draggable 11</li>
<li class="params-list-item">Draggable 12</li>
<li class="params-list-item">Draggable 13</li>
</ul>
</div>If you want to see the prototype in action, you can check it out on this CodePen: http://codepen.io/anon/pen/GpEGqd
I managed to fix the alignment issue by adding self-align: stretch; to the .params-list element. However, this causes it to take up the entire width, which is not desired as I need the params-list to track clicks and remove the overlay.
Can someone help me with fixing the alignment without causing the list to take up the full width?