When the user clicks, an AJAX call is made to retrieve data from a third-party API. The frontend/layout renders correctly before this action; however, after the data is fetched and displayed in the frontend, the layout changes.
Upon debugging multiple times, it appears that the inherited relation is being altered.
What could be causing this issue?
This section of HTML is affected:
#mainContent .fourthRow .Goals {
float: left;
width: 20%;
height: 280px;
margin-right: 5px;
background-color: #F2F8FF;
}
#mainContent .fourthRow .goalsColumn {
background-color: #F2F8FF;
display: inline-block;
float: left;
height: 100%;
width: 24.3%;
text-align: center;
border-right: 1px solid;
margin-right: 1px;
border-color: #DADADA;
font-family: 'Muli', sans-serif;
font-weight: bold;
font-size: 15px;
}
#mainContent .fourthRow .goalsColumn p {
height: 40px;
border-bottom: 1px solid;
border-color: #DADADA;
font-family: 'Muli', sans-serif;
vertical-align: middle;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}<div class="fourthRow">
<div class="Goals">
<div class="goalsColumn">
<div id="divGoal"><img id="goal" src="{% static "images/goal.png" %}" alt="soccergoal"></div>
<div><p>Scored Goals</p></div>
<div><p>SGPM</p></div>
<div><p>Conceded Goals</p></div>
<div><p>CGPM</p></div>
<div><p>Goals Total</p></div>
<div><p>GTPM</p></div>
</div>
<div class="goalsColumn">
<div><p>Home</p></div>
<div id="goals_home_for" "goals_style"><p></p></div>
<div id="goalsAvg_home_for"><p></p></div>
<div id="goals_home_against"><p></p></div>
<div id="goalsAvg_home_against"><p></p></div>
<div id="goals_total_home"><p></p></div>
<div id="goalsAvg_home_total"><p></p></div>
</div>
<div class="goalsColumn">
<div><p>Away</p></div>
<div id="goals_away_for"><p></p></div>
<div id="goalsAvg_away_for"><p></p></div>
<div id="goals_away_against"><p></p></div>
<div id="goalsAvg_away_against"><p></p></div>
<div id="goals_total_away"><p></p></div>
<div id="goalsAvg_away_total"><p></p></div>
</div>
<div class="goalsColumn">
<div><p>Total</p></div>
<div id="goals_total_for2"><p></p></div>
<div id="goalsAvg_total_for"><p></p></div>
<div id="goals_total_against"><p></p></div>
<div id="goalsAvg_total_against"><p></p></div>
<div id="goals_total"><p></p></div>
<div id="goalsAvg_total"><p></p></div>
</div>
</div;Display Before JS/AJAX Call:
https://i.sstatic.net/2dRip.jpg
Layout After JS/AJAX Call: