Kevin Powell - Community•4w ago

Styling complex/dynamic element

I have an element that might or not have a checkbox above, and that might or not have a description that will go on two rows, what's the best approach in styling such a thing? I'm trying flex, but since the number of flex item is dynamic it doesn't work too well

9 Replies

13eck•4w ago

If you want a rigid layout structure than flexbox is the wrong tool, use grid.

MC23OP•4w ago

Solved with grid, but I had to set an empty span where the checkbox can be to always have the same number of elements

Jochem•4w ago

you can solve that with grid areas if you want, though having a placeholder element isn't the end of the world either grid areas or explicitly placing elements based on grid lines

MC23OP•4w ago

I had 10 minutes to solve the issue because it's going into production, I chose the quick way

13eck•4w ago

Now that it's in production you can take your time to fix it and push the fix. Or just leave it :p

StefanH•4w ago

That's not the end of the world

Rowe2ry•4w ago

you could use the :has() pseudo selector if you feel okay about its browser support. Using css custom properties will help couple otherwise -seemingly unrelated css values.

<style>
  .card {
    --checkbox-size: 1rem;
    --visual-top-margin: 1rem;
    --card-row-gap: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: var(--card-row-gap);
    margin-top: var(--visual-top-margin);

    /* not has checkbox selector gives more margin where the element is absent */
    &:not(:has(input[type="checkbox"])) {
      margin-top: calc(var(--visual-top-margin) + var(--checkbox-size) + var(--card-row-gap));
    }

    input[type="checkbox"] {
      width: var(--checkbox-size);
      height: var(--checkbox-size);
    }
  }
</style>

<style>
  .card {
    --checkbox-size: 1rem;
    --visual-top-margin: 1rem;
    --card-row-gap: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: var(--card-row-gap);
    margin-top: var(--visual-top-margin);

    /* not has checkbox selector gives more margin where the element is absent */
    &:not(:has(input[type="checkbox"])) {
      margin-top: calc(var(--visual-top-margin) + var(--checkbox-size) + var(--card-row-gap));
    }

    input[type="checkbox"] {
      width: var(--checkbox-size);
      height: var(--checkbox-size);
    }
  }
</style>

Rowe2ry•4w ago

Looking at the design again, you could also set a min height and think of the "far-side" of flexbox.

.card {
  min-height: 5rem;
  display: flex;
  align-items: center;
  justify-content: end;

  input[type="checkbox"] {
    justify-self: start;
  }
}

.card {
  min-height: 5rem;
  display: flex;
  align-items: center;
  justify-content: end;

  input[type="checkbox"] {
    justify-self: start;
  }
}

MC23OP•4w ago

Thank you for your answer, I'll try to implement this :)

Gaming

Programming

Styling complex/dynamic element

Did you find this page helpful?