Today I Learned

Make sure borders are not doubled in list

When I had a static table (made with divs, because every field was a separate page on mobile), borders were no problem. However, our’s client designer decided it would be nice to indicate required fields with red border and pink background. It caused me some trouble due to doubled borders.

Screenshot-2021-09-08-at-10-15-01

My field component looks like that Screenshot-2021-09-08-at-14-05-38

So I could use adjacent sibling selector to check whether before field I had a field with error. If it’s true, then I hide top border since it’s already present for the required field. Screenshot-2021-09-09-at-08-37-36

Now it works!

Screenshot-2021-09-08-at-10-15-13