Kevin Powell - Community•9mo ago

Mantaining field alignment across rows

Hello, I'm working on a Svelte app for a medical history application. I'm trying to render out a list of patients with name and id data, last visit and an arrow to expand the card. The issue I'm facing right now is that due to the characters not taking up the same horizontal space, there's a small miss alignment that I can't seem to fix. Here's my code:

<div class="Table">
    {#each patients as patient, i}
        <div class="row">
            <div class="patient-details">
                <p class="patient-name">
                    {patient.name + ' ' + patient.lastName}
                </p>
                <p class="patient-id">
                    {patient.pid}
                </p>
            </div>
            <div class="appointment-date">
                <p>{patient.lastAppointment}</p>
            </div>
            <div class="actions">
                <a href={`/${patient.id}`}>
                    <ArrowRight />
                </a>
            </div>
        </div>
    {/each}
</div>

<style>
    .Table {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    .row {
        background-color: #fff;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 1.2rem 1.5rem;
        border-radius: 5px;
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1);
    }

    .patient-name {
        font-weight: bold;
    }

    .actions {
        display: flex;
        gap: 0.5rem;
    }
</style>

<div class="Table">
    {#each patients as patient, i}
        <div class="row">
            <div class="patient-details">
                <p class="patient-name">
                    {patient.name + ' ' + patient.lastName}
                </p>
                <p class="patient-id">
                    {patient.pid}
                </p>
            </div>
            <div class="appointment-date">
                <p>{patient.lastAppointment}</p>
            </div>
            <div class="actions">
                <a href={`/${patient.id}`}>
                    <ArrowRight />
                </a>
            </div>
        </div>
    {/each}
</div>

<style>
    .Table {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    .row {
        background-color: #fff;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 1.2rem 1.5rem;
        border-radius: 5px;
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1);
    }

    .patient-name {
        font-weight: bold;
    }

    .actions {
        display: flex;
        gap: 0.5rem;
    }
</style>

5 Replies

MarkBoots•9mo ago

you might want to look at subgrid or just a table

CodeNascher•9mo ago

<table> damn too slow

MarkBoots•9mo ago

haha actually a table does make the most sence, it's tabular data

CodeNascher•9mo ago

exactly

TheHonoredOne•9mo ago

Thanks @[object Object] @MarkBoots I didn't think table was actually ever used idk why, I'll do that!

Gaming

Programming

Mantaining field alignment across rows