reactjs - Calendar squishes when there are too many icons in a cell (React) - Stack Overflow

admin管理员组

文章数量:1404923

I trying to develop a gardening calendar, and it breaks when text or icons won't fit anymore. Can somebody help me with this, please?

I tried a lot of different ways to wrap, but nothing works.

return (
    <div className="border border-secondary d-flex flex-column">
        <header className="d-flex flex-column align-items-center">
            {rowIdx === 0 && (
                <p className="text-muted small mt-1 mb-0">
                    {day.format('ddd').toUpperCase()}
                </p>
            )}
            <div
                className={`text-center ${getCurrentDayClass()}`}
                style={{ width: '30px', height: '30px', lineHeight: '30px' }}
            >
                {day.format('DD')}
            </div>
        </header>
        <div className="flex-grow-1 cursor-pointer" onClick={() => {
            setDaySelected(day);
            setShowEventModal(true);
        }}>
            {dayEvents.map((evt, idx) => (
                <div
                    key={idx}
                    onClick={() => setSelectedEvent(evt)}
                    className="d-flex flex-column align-items-start" style={{ gap: "6px" }}
                >
                    <div className="d-flex align-items-center flex-wrap" style={{ gap: "4px", width: '100%' }}>
                        {(evt.toDo || []).map((task, taskIdx) => (
                            <div key={taskIdx} className="ms-2" style={{cursor: "pointer", backgroundColor: "red", padding: 3, borderRadius: 6, color: "white"}}>
                                {task}
                            </div>
                        ))}
                        <div className="d-flex flex-wrap align-items-center" style={{ gap: "6px", maxWidth: "100%" }}>
                        <span className="ms-2" style={{cursor: "pointer", flexShrink: 0, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis"}}>
                                {evt.title}
                            </span>
                            {(evt.labels || []).map((label, labelIdx) => {
                                const iconClass = Object.keys(labelsClasses).find(key => labelsClasses[key] === label) || label;
                                return (
                                    <i 
                                        key={labelIdx} 
                                        className={`fi fi-rr-${iconClass}`} 
                                        style={{ fontSize: "20px", cursor: "pointer", flexShrink: 0, minWidth: "20px" }}
                                    />
                                );
                            })}
                        </div>
                    </div>
                    {evt.title === "Mavrik" && (
                        <div className="calendar-event-box">
                            Make sure to wait at least 7 days before harvest!
                        </div>
                    )}
                </div>
            ))}
        </div>
    </div>
);

This is how it looks after breaking:

本文标签： reactjsCalendar squishes when there are too many icons in a cell (React)Stack Overflow