Kevin Powell - Community•3mo ago

Implementing a Field Group Link(?)

Not sure that's a good name for it, but I want to visually indicate that two groups of fields are linked (i.e., changing one will update the other). What I have is this: When birthdate is updated, the age updates. If the age is updated, then the DOB is updated, etc... I need each end of the bracket to line up centered on the field, and I got it to work by hard coding margin top/bottom

.bracket > div[data-side="top"] {
  margin-top: 70px; /* *** Like to not hard code this */
  border-top: 1px solid black;
}

.bracket > div[data-side="bottom"] {
  border-bottom: 1px solid black;
  margin-bottom: 20px; /* *** Like to not hard code this */
}

.bracket > div[data-side="top"] {
  margin-top: 70px; /* *** Like to not hard code this */
  border-top: 1px solid black;
}

.bracket > div[data-side="bottom"] {
  border-bottom: 1px solid black;
  margin-bottom: 20px; /* *** Like to not hard code this */
}

I'd considered using a grid for the entire thing, but kind of wanted to keep the different parts grouped (birthdate entry, age). I guess I'm just looking for suggestions on how to improve this, not relying on magic margin numbers, etc... I have an initial implementation here in this sandbox: https://codesandbox.io/p/sandbox/zdv32p

4 Replies

Chris Bolson•3mo ago

You could try using grid on the bracket rather than flex and define the grid-template-rows and remove the margins from the top and bottom element, something like this:

.bracket {
  grid-column: 2;
  grid-row: 1 / 3;
/*
  display: flex;
  flex-direction: column;
  */
  display: grid;
  grid-template-rows: 1fr auto 1fr;
}

.bracket {
  grid-column: 2;
  grid-row: 1 / 3;
/*
  display: flex;
  flex-direction: column;
  */
  display: grid;
  grid-template-rows: 1fr auto 1fr;
}

I tried editing your code but it was giving me errors

Bryce242OP•3mo ago

That still requires me to hardcode the top and bottom margins though right? Don't know much about codsandbox, but I think you have to fork it?

Bryce242OP•3mo ago

This is how I have everything grouped

Bryce242OP•3mo ago

I could do something like this, but then I lose my grouped fields...

Gaming

Programming

Implementing a Field Group Link(?)

Did you find this page helpful?