I'm having an issue with getting the alignment correct. Especially having the bracket connectors line up correctly. They are always setting top: to 32.5 which is exactly half of the height of 75. This seems to set things off from the overlaying divs, etc. I'm using your minimal example and mine is pretty much the same except for the following tag...
Yours: (is 9.5px)
<div class="teamContainer" style="top: 9.5px;"><div class="team lose" style="width: 100px;" data-teamid="0"><div class="label" style="width: 70px;">Team 1</div><div class="score" style="width: 30px;" data-resultid="result-1">1</div></div><div class="team win highlightLoser" style="width: 100px;" data-teamid="1"><div class="label" style="width: 70px;">Team 2</div><div class="score" style="width: 30px;" data-resultid="result-2">2</div></div><div class="connector highlightLoser" style="height: 9.5px; width: 20px; right: -22px; top: 33.5px; border-bottom: none;"><div class="connector highlightLoser" style="width: 20px; right: -20px; bottom: 0px;"></div></div></div>
For some reason the calculation in the code isn't finding the values it needs. I'm using this in Ionic 5 with Angular. Any ideas?
I see in your TS file in github that you are calculating top in 5 places I think. Some of them are calculated by looking at the different winner divs, etc. and I'm guessing the code can't see that in mine, and is defaulting to half of the height of the winner div, or something.
I'm having an issue with getting the alignment correct. Especially having the bracket connectors line up correctly. They are always setting top: to 32.5 which is exactly half of the height of 75. This seems to set things off from the overlaying divs, etc. I'm using your minimal example and mine is pretty much the same except for the following tag... Yours: (is 9.5px)
<div class="teamContainer" style="top: 9.5px;"><div class="team lose" style="width: 100px;" data-teamid="0"><div class="label" style="width: 70px;">Team 1</div><div class="score" style="width: 30px;" data-resultid="result-1">1</div></div><div class="team win highlightLoser" style="width: 100px;" data-teamid="1"><div class="label" style="width: 70px;">Team 2</div><div class="score" style="width: 30px;" data-resultid="result-2">2</div></div><div class="connector highlightLoser" style="height: 9.5px; width: 20px; right: -22px; top: 33.5px; border-bottom: none;"><div class="connector highlightLoser" style="width: 20px; right: -20px; bottom: 0px;"></div></div></div>Mine: (is 32.5px)
<div class="teamContainer" style="top: 32.5px;"><div class="team lose" style="width: 100px;" data-teamid="0"><div class="label" style="width: 70px;">Team 1</div><div class="score" style="width: 30px;" data-resultid="result-1">1</div></div><div class="team win highlightLoser" style="width: 100px;" data-teamid="1"><div class="label" style="width: 70px;">Team 2</div><div class="score" style="width: 30px;" data-resultid="result-2">2</div></div><div class="connector highlightLoser" style="height: 32.5px; width: 20px; right: -22px; top: -1px; border-bottom: none;"><div class="connector highlightLoser" style="width: 20px; right: -20px; bottom: 0px;"></div></div></div>For some reason the calculation in the code isn't finding the values it needs. I'm using this in Ionic 5 with Angular. Any ideas?
I see in your TS file in github that you are calculating top in 5 places I think. Some of them are calculated by looking at the different winner divs, etc. and I'm guessing the code can't see that in mine, and is defaulting to half of the height of the winner div, or something.