Question 43045 in Html Question posted in
Some basic documentation can be found here.

How to make all dates in a line the same height in HTML/CSS?

I have a line of dates with different lengths, and I want to make them all the same height so that the line looks uniform.

Specifically, I have a text in the line "TUE" in date 28 that is longer than the other dates in the line like "27,19,30,31,1,2". I would like all the dates to be the same height in the line so that only one is not longer than the others.

In my code, I have used the following classes:

class="day" – contains the given day for example "MON" and all its cards in the downward slopes like "27,3,10,17,24"
class="card" – contains the date

Here’s a link to my code on JSFiddle: https://jsfiddle.net/nLrpo5k3/25/

So far, I have tried adding some CSS properties to the "card" class such as height, line-height, and vertical-align, but they don’t seem to work as expected.

What I expected was that all the dates would have the same height and be aligned properly in the line. However, what actually resulted was that some dates were still longer than others, and the alignment was not consistent.

I have also tried adding some JavaScript code to adjust the height of the dates dynamically, but it didn’t seem to work either.

HTML:

    <div class="content">
        <div class="day">
            <h3 class="day-title">Mon</h3>
            <div>
                <div class="card pos-rel">
                    <div class="day-date">
                        <div class="right ml-auto pos-rel"><span style="opacity: 0.6;">27</span></div>
                    </div>
                    <div class="creation-menu"><i class="fa-light fa-plus"></i><i class="fa-light fa-battery-low"></i><i
                            class="fa-light fa-paste"></i></div>
                    <div class="workout"></div>
                </div>
                <div class="card pos-rel">
                    <div class="day-date">
                        <div class="right ml-auto pos-rel"><span style="opacity: 1;">3</span></div>
                    </div>
                    <div class="creation-menu"><i class="fa-light fa-plus"></i><i class="fa-light fa-battery-low"></i><i
                            class="fa-light fa-paste"></i></div>
                    <div class="workout"></div>
                </div>
                <div class="card pos-rel">
                    <div class="day-date">
                        <div class="right ml-auto pos-rel"><span style="opacity: 1;">10</span></div>
                    </div>
                    <div class="creation-menu"><i class="fa-light fa-plus"></i><i class="fa-light fa-battery-low"></i><i
                            class="fa-light fa-paste"></i></div>
                    <div class="workout"></div>
                </div>
                <div class="card pos-rel">
                    <div class="day-date">
                        <div class="right ml-auto pos-rel"><span style="opacity: 1;">17</span></div>
                    </div>
                    <div class="creation-menu"><i class="fa-light fa-plus"></i><i class="fa-light fa-battery-low"></i><i
                            class="fa-light fa-paste"></i></div>
                    <div class="workout"></div>
                </div>
                <div class="card pos-rel">
                    <div class="day-date">
                        <div class="right ml-auto pos-rel"><span style="opacity: 1;">24</span></div>
                    </div>
                    <div class="creation-menu"><i class="fa-light fa-plus"></i><i class="fa-light fa-battery-low"></i><i
                            class="fa-light fa-paste"></i></div>
                    <div class="workout"></div>
                </div>
            </div>
        </div>
        <div class="day">
            <h3 class="day-title">Tue</h3>
            <div>
                <div class="card pos-rel">
                    <div class="day-date">
                        <div class="right ml-auto pos-rel"><span style="opacity: 0.6;">28</span></div>
                    </div>
                    <div class="creation-menu"><i class="fa-light fa-plus"></i><i class="fa-light fa-battery-low"></i><i
                            class="fa-light fa-paste"></i></div>
                    <div class="workout">ddd<br/>ddd<br/>ddd<br/>ddd<br/>ddd<br/>ddd<br/>ddd<br/>ddd<br/>dddddd<br/>this is longer></div>
                </div>
                <div class="card pos-rel">
                    <div class="day-date">
                        <div class="right ml-auto pos-rel"><span style="opacity: 1;">4</span></div>
                    </div>
                    <div class="creation-menu"><i class="fa-light fa-plus"></i><i class="fa-light fa-battery-low"></i><i
                            class="fa-light fa-paste"></i></div>
                    <div class="workout"></div>
                </div>
                <div class="card pos-rel">
                    <div class="day-date">
                        <div class="right ml-auto pos-rel"><span style="opacity: 1;">11</span></div>
                    </div>
                    <div class="creation-menu"><i class="fa-light fa-plus"></i><i class="fa-light fa-battery-low"></i><i
                            class="fa-light fa-paste"></i></div>
                    <div class="workout"></div>
                </div>
                <div class="card pos-rel">
                    <div class="day-date">
                        <div class="right ml-auto pos-rel"><span style="opacity: 1;">18</span></div>
                    </div>
                    <div class="creation-menu"><i class="fa-light fa-plus"></i><i class="fa-light fa-battery-low"></i><i
                            class="fa-light fa-paste"></i></div>
                    <div class="workout"></div>
                </div>
                <div class="card pos-rel">
                    <div class="day-date">
                        <div class="right ml-auto pos-rel"><span style="opacity: 1;">25</span></div>
                    </div>
                    <div class="creation-menu"><i class="fa-light fa-plus"></i><i class="fa-light fa-battery-low"></i><i
                            class="fa-light fa-paste"></i></div>
                    <div class="workout"></div>
                </div>
            </div>
        </div>
        <div class="day">
            <h3 class="day-title">Wed</h3>
            <div>
                <div class="card pos-rel">
                    <div class="day-date">
                        <div class="right ml-auto pos-rel"><span style="opacity: 0.6;">29</span></div>
                    </div>
                    <div class="creation-menu"><i class="fa-light fa-plus"></i><i class="fa-light fa-battery-low"></i><i
                            class="fa-light fa-paste"></i></div>
                    <div class="workout"></div>
                </div>
                <div class="card pos-rel">
                    <div class="day-date">
                        <div class="left"><i class="fa-light fa-trash"></i></div>
                        <div class="right ml-auto pos-rel"><span class="day-title-active"></span><span
                                style="opacity: 1;">5</span></div>
                    </div>
                    <div class="workout">
                        <h6 class="mt-0 mb-0">Rest day</h6>
                    </div>
                </div>
                <div class="card pos-rel">
                    <div class="day-date">
                        <div class="right ml-auto pos-rel"><span style="opacity: 1;">12</span></div>
                    </div>
                    <div class="creation-menu"><i class="fa-light fa-plus"></i><i class="fa-light fa-battery-low"></i><i
                            class="fa-light fa-paste"></i></div>
                    <div class="workout"></div>
                </div>
                <div class="card pos-rel">
                    <div class="day-date">
                        <div class="right ml-auto pos-rel"><span style="opacity: 1;">19</span></div>
                    </div>
                    <div class="creation-menu"><i class="fa-light fa-plus"></i><i class="fa-light fa-battery-low"></i><i
                            class="fa-light fa-paste"></i></div>
                    <div class="workout"></div>
                </div>
                <div class="card pos-rel">
                    <div class="day-date">
                        <div class="right ml-auto pos-rel"><span style="opacity: 1;">26</span></div>
                    </div>
                    <div class="creation-menu"><i class="fa-light fa-plus"></i><i class="fa-light fa-battery-low"></i><i
                            class="fa-light fa-paste"></i></div>
                    <div class="workout"></div>
                </div>
            </div>
        </div>
        <div class="day">
            <h3 class="day-title">Thu</h3>
            <div>
                <div class="card pos-rel">
                    <div class="day-date">
                        <div class="right ml-auto pos-rel"><span style="opacity: 0.6;">30</span></div>
                    </div>
                    <div class="creation-menu"><i class="fa-light fa-plus"></i><i class="fa-light fa-battery-low"></i><i
                            class="fa-light fa-paste"></i></div>
                    <div class="workout"></div>
                </div>
                <div class="card pos-rel">
                    <div class="day-date">
                        <div class="right ml-auto pos-rel"><span style="opacity: 1;">6</span></div>
                    </div>
                    <div class="creation-menu"><i class="fa-light fa-plus"></i><i class="fa-light fa-battery-low"></i><i
                            class="fa-light fa-paste"></i></div>
                    <div class="workout"></div>
                </div>
                <div class="card pos-rel">
                    <div class="day-date">
                        <div class="right ml-auto pos-rel"><span style="opacity: 1;">13</span></div>
                    </div>
                    <div class="creation-menu"><i class="fa-light fa-plus"></i><i class="fa-light fa-battery-low"></i><i
                            class="fa-light fa-paste"></i></div>
                    <div class="workout"></div>
                </div>
                <div class="card pos-rel">
                    <div class="day-date">
                        <div class="right ml-auto pos-rel"><span style="opacity: 1;">20</span></div>
                    </div>
                    <div class="creation-menu"><i class="fa-light fa-plus"></i><i class="fa-light fa-battery-low"></i><i
                            class="fa-light fa-paste"></i></div>
                    <div class="workout"></div>
                </div>
                <div class="card pos-rel">
                    <div class="day-date">
                        <div class="right ml-auto pos-rel"><span style="opacity: 1;">27</span></div>
                    </div>
                    <div class="creation-menu"><i class="fa-light fa-plus"></i><i class="fa-light fa-battery-low"></i><i
                            class="fa-light fa-paste"></i></div>
                    <div class="workout"></div>
                </div>
            </div>
        </div>
        <div class="day">
            <h3 class="day-title">Fri</h3>
            <div>
                <div class="card pos-rel">
                    <div class="day-date">
                        <div class="right ml-auto pos-rel"><span style="opacity: 0.6;">31</span></div>
                    </div>
                    <div class="creation-menu"><i class="fa-light fa-plus"></i><i class="fa-light fa-battery-low"></i><i
                            class="fa-light fa-paste"></i></div>
                    <div class="workout"></div>
                </div>
                <div class="card pos-rel">
                    <div class="day-date">
                        <div class="right ml-auto pos-rel"><span style="opacity: 1;">7</span></div>
                    </div>
                    <div class="creation-menu"><i class="fa-light fa-plus"></i><i class="fa-light fa-battery-low"></i><i
                            class="fa-light fa-paste"></i></div>
                    <div class="workout"></div>
                </div>
                <div class="card pos-rel">
                    <div class="day-date">
                        <div class="right ml-auto pos-rel"><span style="opacity: 1;">14</span></div>
                    </div>
                    <div class="creation-menu"><i class="fa-light fa-plus"></i><i class="fa-light fa-battery-low"></i><i
                            class="fa-light fa-paste"></i></div>
                    <div class="workout"></div>
                </div>
                <div class="card pos-rel">
                    <div class="day-date">
                        <div class="right ml-auto pos-rel"><span style="opacity: 1;">21</span></div>
                    </div>
                    <div class="creation-menu"><i class="fa-light fa-plus"></i><i class="fa-light fa-battery-low"></i><i
                            class="fa-light fa-paste"></i></div>
                    <div class="workout"></div>
                </div>
                <div class="card pos-rel">
                    <div class="day-date">
                        <div class="right ml-auto pos-rel"><span style="opacity: 1;">28</span></div>
                    </div>
                    <div class="creation-menu"><i class="fa-light fa-plus"></i><i class="fa-light fa-battery-low"></i><i
                            class="fa-light fa-paste"></i></div>
                    <div class="workout"></div>
                </div>
            </div>
        </div>
        <div class="day">
            <h3 class="day-title">Sat</h3>
            <div>
                <div class="card pos-rel">
                    <div class="day-date">
                        <div class="right ml-auto pos-rel"><span style="opacity: 1;">1</span></div>
                    </div>
                    <div class="creation-menu"><i class="fa-light fa-plus"></i><i class="fa-light fa-battery-low"></i><i
                            class="fa-light fa-paste"></i></div>
                    <div class="workout"></div>
                </div>
                <div class="card pos-rel">
                    <div class="day-date">
                        <div class="right ml-auto pos-rel"><span style="opacity: 1;">8</span></div>
                    </div>
                    <div class="creation-menu"><i class="fa-light fa-plus"></i><i class="fa-light fa-battery-low"></i><i
                            class="fa-light fa-paste"></i></div>
                    <div class="workout"></div>
                </div>
                <div class="card pos-rel">
                    <div class="day-date">
                        <div class="right ml-auto pos-rel"><span style="opacity: 1;">15</span></div>
                    </div>
                    <div class="creation-menu"><i class="fa-light fa-plus"></i><i class="fa-light fa-battery-low"></i><i
                            class="fa-light fa-paste"></i></div>
                    <div class="workout"></div>
                </div>
                <div class="card pos-rel">
                    <div class="day-date">
                        <div class="right ml-auto pos-rel"><span style="opacity: 1;">22</span></div>
                    </div>
                    <div class="creation-menu"><i class="fa-light fa-plus"></i><i class="fa-light fa-battery-low"></i><i
                            class="fa-light fa-paste"></i></div>
                    <div class="workout"></div>
                </div>
                <div class="card pos-rel">
                    <div class="day-date">
                        <div class="right ml-auto pos-rel"><span style="opacity: 1;">29</span></div>
                    </div>
                    <div class="creation-menu"><i class="fa-light fa-plus"></i><i class="fa-light fa-battery-low"></i><i
                            class="fa-light fa-paste"></i></div>
                    <div class="workout"></div>
                </div>
            </div>
        </div>
        <div class="day">
            <h3 class="day-title">Sun</h3>
            <div>
                <div class="card pos-rel">
                    <div class="day-date">
                        <div class="right ml-auto pos-rel"><span style="opacity: 1;">2</span></div>
                    </div>
                    <div class="creation-menu"><i class="fa-light fa-plus"></i><i class="fa-light fa-battery-low"></i><i
                            class="fa-light fa-paste"></i></div>
                    <div class="workout"></div>
                </div>
                <div class="card pos-rel">
                    <div class="day-date">
                        <div class="right ml-auto pos-rel"><span style="opacity: 1;">9</span></div>
                    </div>
                    <div class="creation-menu"><i class="fa-light fa-plus"></i><i class="fa-light fa-battery-low"></i><i
                            class="fa-light fa-paste"></i></div>
                    <div class="workout"></div>
                </div>
                <div class="card pos-rel">
                    <div class="day-date">
                        <div class="right ml-auto pos-rel"><span style="opacity: 1;">16</span></div>
                    </div>
                    <div class="creation-menu"><i class="fa-light fa-plus"></i><i class="fa-light fa-battery-low"></i><i
                            class="fa-light fa-paste"></i></div>
                    <div class="workout"></div>
                </div>
                <div class="card pos-rel">
                    <div class="day-date">
                        <div class="right ml-auto pos-rel"><span style="opacity: 1;">23</span></div>
                    </div>
                    <div class="creation-menu"><i class="fa-light fa-plus"></i><i class="fa-light fa-battery-low"></i><i
                            class="fa-light fa-paste"></i></div>
                    <div class="workout"></div>
                </div>
                <div class="card pos-rel">
                    <div class="day-date">
                        <div class="right ml-auto pos-rel"><span style="opacity: 1;">30</span></div>
                    </div>
                    <div class="creation-menu"><i class="fa-light fa-plus"></i><i class="fa-light fa-battery-low"></i><i
                            class="fa-light fa-paste"></i></div>
                    <div class="workout"></div>
                </div>
            </div>
        </div>
    </div>

CSS

.header {
    display: flex;
    flex-direction: column;
}

.header h2 {
    font-family: 'Futura PT', sans-serif;
    font-weight: 500;
    margin-bottom: .25rem;
    text-align: right;
}

.content {
    width: 100%;
    display: inline-flex;
}

.content .day {
    width: 14.3%;
}

.content .day-title {
    background-color: red;
    padding: .15rem;
    text-align: center;
    font-size: 1.2rem;
    font-family: 'Futura PT', sans-serif;
    font-weight: 500;
    border: 1px solid var(--white);
    border-radius: .2rem;
    text-transform: uppercase;
    z-index: 2;
}

.content .card {
    padding: .5rem;
    border: 1px solid black;
    min-height: 10rem;
    border-radius: .2rem;
}

.day-date {
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    z-index: 1;
    margin-bottom: .25rem;
    background-color: var(--white-light);
}

@media(max-width: 768px) {
    .content {
        flex-direction: column;
    }
    .content .day {
        width: 100%;
    }
}

Here I add the React code that makes up this html code, if it can’t be done only via css

<div className="content">
                        {daysOfWeek.map((day, index) => (
                            <div className={day === new Date(actionMenu.date).toLocaleString('en-US', { weekday: 'short' }) ? 'day day-selected' : 'day'} key={index}>
                                <h3 className='day-title'>{day}</h3>
                                <div>
                                    {daysArray.map(dmap => {
                                        let filteredWorkoutList = workoutList.filter(e => Date.parse(e.date) === Date.parse(dmap))
                                        let textDate = new Date(dmap).toISOString().slice(0, 10)
                                        if (daysOfWeek[((new Date(dmap)).getDay() + 6) % 7] === day)
                                            return <div className="card pos-rel">
                                                <div className="day-date">
                                                    {filteredWorkoutList.length !== 0 && (<div className="left">
                                                        {filteredWorkoutList[0]?.complete !== "rest" ? <i className="fa-light fa-arrows-up-down-left-right"></i> : ""}
                                                        {filteredWorkoutList[0]?.complete !== "rest" ? <i className="fa-light fa-clipboard"></i> : ""}
                                                        <i className="fa-light fa-trash" onClick={() => setdeleteMenu({ status: true, date: textDate })}></i>
                                                    </div>)}
                                                    <div className="right ml-auto pos-rel">{Date.parse(textDate) === Date.parse(new Date().toISOString().slice(0, 10)) ? <span className="day-title-active"></span> : ""}<span style={{ opacity: new Date(dmap).getMonth() === currentMonth ? 1 : 0.6 }}>{new Date(dmap).getDate()}</span></div>
                                                </div>

                                                {filteredWorkoutList.length === 0 && Date.parse(actionMenu.date) !== Date.parse(dmap) && (<div className="creation-menu">
                                                    <i className="fa-light fa-plus" onClick={() => setActionMenu({ type: "create", date: dmap, workoutTitle: "", workoutExercises: [{ name: "", instructions: "" }] })}></i>
                                                    <i className="fa-light fa-battery-low" onClick={(e) => restDayWorkoutEvent(e, dmap)}></i>
                                                    <i className="fa-light fa-paste"></i>
                                                </div>)}

                                                {actionMenu.type !== null && Date.parse(actionMenu.date) === Date.parse(dmap) && (
                                                    <div className='action-menu'>
                                                        <label>Workout name</label>
                                                        <input type="text" placeholder="Enter workout name" value={actionMenu.workoutTitle} onChange={changeWorkoutDataEvent} />
                                                        {actionMenu.workoutExercises.map((weitem, wekey) => {
                                                            return (
                                                                <div className="exercise-card">
                                                                    <input type="text" placeholder="Exercise name" value={weitem.name} name="name" onChange={(e) => changeExerciseDataEvent(e, wekey)} />
                                                                    <textarea placeholder="Exercise instructions" className='mt-025' value={weitem.instructions} name="instructions" onChange={(e) => changeExerciseDataEvent(e, wekey)} />
                                                                    {wekey === actionMenu.workoutExercises.length - 1 ? <button type="button" className="btn btn-default btn-add-exercise" onClick={addExerciseData}><i className="fa-thin fa-hexagon-plus"></i> Exercise</button> : ""}
                                                                </div>
                                                            )
                                                        })}

                                                        <div className='ds-inline-flex-align-center mt-1 wd-100'>
                                                            <button type="button" className="btn mr-025 ml-auto cancel" onClick={() => setActionMenu({ type: null, date: "" })}>Cancel</button>
                                                            <button type="button" className="btn btn-default" disabled={actionMenu.workoutTitle.trim() === ""}>Save</button>
                                                        </div>
                                                    </div>
                                                )}

                                                <div className={filteredWorkoutList.length === 0 ? "workout" : "workout hover"} onClick={() => { if (filteredWorkoutList.length !== 0) { setActionMenu({ type: "edit", date: dmap, workoutTitle: "", workoutExercises: [] }); } }}>
                                                    {filteredWorkoutList.map(witem => {
                                                        return <h6 className='mt-0 mb-0'>{witem.title}</h6>
                                                    })}
                                                </div>

                                            </div>
                                    })}
                                </div>
                            </div>
                        ))}
                    </div>

html result on image

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    I've done it in a single-file way, since it's ordered sequentially, so that's how it will work.

    <div className='days-content'>
                            {daysOfWeek.map((day, index) => {
                                return <div className='day-title' key={index}>
                                    <h3>{day}</h3>
                                </div>
                            })}
                        </div>

                        <div className='days-card-content'>
                            {daysArray.map(dmap => {
                                return <div className='card'>{dmap}</div>
                            })}
                        </div>

  2. 0

    If you want all the rows the same height, use the CSS display:grid; mode

    With this, all rows will auto-adjust to the same height, as required for the tallest box in the entire grid.

    .container {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 1fr;
  grid-column-gap: 1em;
  grid-row-gap: 1em;
}

.cell {
  background: palegoldenrod;
}
    <div class="container">
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell">
All cells become as tall as me. Edit me and re-run, if you don't believe it!
  </div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div
</div>

    This amazing feature of CSS is only a few years old, and is explained lucidly here:

    https://css-tricks.com/snippets/css/complete-guide-grid/

    Login or Signup to reply.
  3. 0

    If you want each row to be a different height, use display:flex;

    .container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.cell {
  display: table-cell;
  background: palegoldenrod;
  width: 14.28%;
  margin-bottom: 0.5em;
  min-height: 0.5em;
}
    <div class="container">
  <div class="cell">a</div>
  <div class="cell">b</div>
  <div class="cell">c</div>
  <div class="cell"></div>
  <div class="cell">
    All cells in my row become as tall as me.
  </div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell">But</div>
  <div class="cell">other</div>
  <div class="cell">rows</div>
  <div class="cell">have</div>
  <div class="cell">own size</div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search