4 replies

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

KP-C

Kevin Powell - Community•10mo ago•

4 replies

Bryce242

Implementing a Field Group Link(?)

.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 */
}

Implementing a Field Group Link(?)

Similar Threads

Implementing a Field Group Link(?)

Similar Threads

Similar Threads

Similar Threads