Greetings, esteemed members of the SO community,
I am here once again with a question that requires your assistance.
Context:
I am currently working on a grid system that allows users to drag and drop items onto specific grid fields. When the grid is recalculated, such as switching to a different week, the corresponding objects for that week are appended to the grid row in the following manner:
//Create orderItem to place into the DOM
var div = "<div class='draggable orderItem stored' id='" + orderId + "'>" +
"<a href='#/order/" + orderId + "'>" + orderId + "</a>" +
"</div>";
//Append div to the end of the gridRow
var gridRow = "div #" + planningList[plannedItem].get("resource").cid + ".eventRow";
$(div).appendTo(gridRow);
The code above successfully appends the newly created DIV item to the end of my grid row as intended. The DOM structure includes the eventRow, containing grid fields with dates, as well as the dynamically appended orders that are positioned using Javascript:
<div id="1886" class="eventRow">
<div class="gridRow"></div>
<div id="c303" class="draggable orderItem stored" style="width: 90px; position: relative; left: -680px; top: 0px;"></div>
<div id="c308" class="draggable orderItem stored" style="width: 180px; position: relative; left: -775px; top: 20px;"></div>
<div id="c312" class="draggable orderItem stored" style="width: 180px; position: relative; left: -960px; top: 40px;"></div>
</div>
The Issue:
After adding around ten items to an eventRow, the next item to be added deviates significantly from the expected position. Upon investigation, I discovered that due to the "float left" attribute in my CSS, the items are appended next to each other in the row, even after being repositioned.
When the total width of the div items surpasses the screen width, the browser wraps the DIV and places the next item on a new row within the DIV. This disrupts the positioning as the left value keeps increasing for each new item.
Below is my CSS:
div.eventRow {
clear: left;
width: auto;
height: 90px;
overflow: visible;
}
div.orderItem{
float:left;
text-align: center;
margin: 1px 5px 0px 0px;
padding: 0px 0px 0 5px;
background-color: #FFFFFF;
width:60px;
height:60px;
border:1px solid #000000;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
line-height: 60px;
}
div.orderItem.stored{ /* has been rendered on the grid */
width:90px;
height: 20px;
line-height: 16px;
display: inline-block;
}
Summary:
I am facing challenges with space constraints while appending new DIVs within a row. The web browser wraps the added code to a new line, causing disruption in positioning. I am seeking a solution to prevent this wrapping, especially on smaller screens, or explore alternative ways to resolve this issue.