@MuriWolfSubmitted over 2 years ago
A have a little problem in the bottom borders of the cards. I think i know the solution but maybe its not the best. Anything is welcome. :))
Jason Amey
@jasonameyAll comments
- @jasonameyPosted over 2 years ago
Hi Murillo!
Ugh, yeah this was frustrating... took me a few minutes to figure this out..
I was able to solve the border issue by making sure the two cards had separate bottoms. That is, their bottoms are not directly over each other, on the same floor line.
It looks like this is common bug - that is, the faint, 1px-ish border radius peeking out.
I think you would have to change your HTML so the elements are side by side - not parent / child.
like :
<div class="card-1></div> <div class="card-2></div>not :
<div class="card-1> <div class="card-2></div> </div>There are a few ways you could do this then with top, and absolute positioning... I think you could do it with margin, too.
I made an illustration of the issue :
https://docs.google.com/drawings/d/1YNGJR3bJoScawivYbi3P5tCoTGCweDuQdpCmb-y39lM/edit
I was able to do this by creating another container (maybe too many div's ?)...
https://codepen.io/jasonamey/pen/MWQREgG
Might be other ways to do it! That's what I came up with!
0 - @esdra00Submitted over 2 years ago
Having an hard time passing setState between components, will come back to this when I have a solution. Any suggestion is appreciated.
@jasonameyPosted over 2 years agoHi Esdra!
I did a little refactor and got the code working without an error. If you want to take a look, I forked your repo here :
https://github.com/jasonamey/time-tracking-dashboard-react
The changes are under "refactor with context provider"
You can also see the code working here :
https://www.youtube.com/watch?v=bAfnE6NqUf8&ab_channel=JasonAmey
I communicate to you in the code, and tried to add some notes about the changes with :
//JASON HERE :
I used a common pattern for Context that I've seen quite a bit. Hopefully you can follow the refactor...
Take care!
Marked as helpful1
