para el contexto, estoy creando un calendario de vista de día y he mapeado cada hora del día mientras filtraba mis eventos para ver si deberían representarse en ese bloque de horas
mi problema es que los eventos largos que abarcan varias horas se colocan detrás de otros eventos y me gustaría encontrar una manera para que el contenido de desbordamiento empuje el siguiente div de eventos hacia la derecha como si estuviera flexionado en el mismo contenedor.
Idealmente, el "evento" rosa debería estar a la derecha del azul.
Actualmente, las divisiones de eventos futuros simplemente ignoran el desbordamiento de eventos anteriores.
no Jquery y si esto se puede resolver con css, eso es ideal. probablemente sea posible hacer matemáticas con JS, pero podría ser menos confiable / con errores
Gracias de antemano chicos :)
CalendarHour.tsx
hourBlock: { display: 'flex', width: '100%', height: '64px', position: 'relative', }, time: { fontSize: FONT_SIZE_SMALL, color: PLAIN_GREY, marginRight: '30px', lineHeight: '0', }, content: { display: 'flex', width: '100%', borderTop: `1px solid ${PLAIN_GREY}`, }, line: { height: '1px', width: '100%', backgroundColor: LIGHT_GREY, margin: 'auto', }, {[...Array(hoursInDay)].map((e, index) => ( <div className={classes.hourBlock} key={e}> <div className={classes.time}>{renderTime(index)}</div> <div className={classes.content}> {events ?.filter((e) => format(new Date(e.start.toString()), 'HH') == renderHour(index)) .map((e) => ( <CalendarEventItem key={e.id} event={e} /> ))} <div className={classes.line} /> </div> </div> ))}CalendarEventItem.tsx
eventItemWrapper: { display: 'flex', width: '100%', borderLeft: `2px solid ${color}`, backgroundColor: WHITE, fontSize: '12px', marginRight: '5px', height, position: 'relative', }, title: { fontWeight: 'bold', marginRight: '5px', }, detailsWrapper: { backgroundColor: fadedColor, width: '100%', paddingLeft: '4px', }, details: {}, <div className={classes.eventItemWrapper}> <div className={classes.detailsWrapper}> <div className={classes.title}>{event.name}</div> <div className={classes.details}>{eventDetails}</div> </div> </div>Espero que este fragmento pueda ayudarlo, incluí dos ejemplos, el de la izquierda usa un contenedor de tamaño fijo, por lo que cuando el niño crece, se desborda y la única forma de hacer que el niño interactúe con otros elementos es a través de JS.
El segundo ejemplo de la derecha, por el contrario, utiliza contenedores con un tamaño no fijo, por lo que son libres de crecer/encogerse cuando los niños cambian de tamaño, por lo que el niño puede interactuar con otros elementos a través de su propio padre.
let height = 50; btn.onclick = e => { height += 1 child1.style.height = height + "px" } let height2 = 50; btn2.onclick = e => { height2 += 1 child3.style.height = height2 + "px" } // OBSERVER const targetNode = child1 // Options for the observer (which mutations to observe) const config = { attributes: true, childList: true, subtree: true }; // Callback function to execute when mutations are observed const callback = function(mutationList, observer) { for (const mutation of mutationList) { if (mutation.type === 'attributes' && mutation.attributeName === "style") { const child2Y = child2.getBoundingClientRect().y const child1Y = child1.getBoundingClientRect().y const child1Height = child1.getBoundingClientRect().height if (child1Y + child1Height >= child2Y) child2.style.transform = `translateY(${child1Y+child1Height - child2Y}px)` } } }; // Create an observer instance linked to the callback function const observer = new MutationObserver(callback); // Start observing the target node for configured mutations observer.observe(targetNode, config); body { display: flex; } .parent1 { height: 50px; } #child1 { width: 50px; height: 50px; background: red; position: relative; } #child2 { width: 50px; height: 50px; background: blue; } #child3 { width: 50px; height: 50px; background: red; position: relative; } #child4 { width: 50px; height: 50px; background: blue; } <div> <div class="parent1"> <div id="child1">Child1</div> </div> <div class="parent2"> <div id="child2">Child2</div> </div> </div> <button id="btn">Enlarge Child 1</button> <div> <div class="parent3"> <div id="child3">Child3</div> </div> <div class="parent4"> <div id="child4">Child4</div> </div> </div> <button id="btn2">Enlarge Child 3</button>