Проблема в том, что когда я navigate
на другой маршрут веб-сайта загружается другой компонент, теперь, если я пытаюсь перейти к старому маршруту, очевидно, css
получает все messed up
, Ui равен overlapping content
, что на самом деле имеет высоту, но теперь родительский контейнер по какой-то причине разрушается.
Подвох в том, что когда я перезагружаю страницу, кажется, все снова работает.
Любое решение для этой проблемы?
<div class="card" *ngFor = "let feed of game.gamearray;" #widgetsContent>
<div class="head">
<div class="gamename">
<b>{{gendercheck}} {{feed.GameName}} <h6>- {{Age}}</h6></b>
<p>{{feed.Venue_Name | slice:0:30}}...</p>
</div>
<div class="result">
<b>{{feed.result}}</b>
<p> {{feed.MatchStarterUniqueName}}</p>
</div>
</div>
<a routerLink="/opencard/{{feed.feedid}}">
<div class="cardData">
<div class="cardData team1">
<img src={{feed.Team1Pic}} onerror="this.src='assets/images/user.png'">
<p>{{feed.Team1name | slice:0:11}}</p>
</div>
<div class="cardData t1score" style="margin-top: 5%;">
<b style="font-size: 1.2em;">{{feed.scoreTeam1}}</b>
<b style="font-size: 1.2em;">{{feed.scoreTeam2}}</b>
</div>
<div class="cardData team2">
<img src={{feed.Team2Pic}} onerror="this.src='assets/images/user.png'">
<p>{{feed.Team2name | slice:0:11}}</p>
</div>
</div>
</a>
<div class="matchstatus">
<textarea disabled>{{feed.EventText | slice:0:100}}..</textarea>
</div>
<div class="footer">
<button class="footer Button"><span *ngIf="feed.JoineeCount">{{feed.JoineeCount}}</span> Joinee</button>
<button class="footer Button"><span *ngIf="feed.PromoteCount">{{feed.PromoteCount}}</span> Promote</button>
<button class="footer Button">Subscribe</button>
<button class="footer Button"><span *ngIf="feed.CommentCount">{{feed.CommentCount}}</span> Talk</button>
</div>
</div>
Код CSS:
.card{
scroll-snap-align: start;
margin: 1% 2.4% 0% 0%;
border-radius: 2%;
/* display: grid; */
display: block;
grid-template-rows: 100px 300px;
width: 31%;
height: 210px;
margin-bottom: 1%;
border-radius: 2%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 10px 0 rgba(0, 0, 0, 0.10);
}
.cardData{
float: left;
width: 100%;
height: 65px;
margin: 2% 0% 2% 0%;
}
.cardData>div{
margin-top: 0%;
margin-left: 2%;
}
.head{
width: 100%;
height: 38px;
border-bottom: 1px solid #dddddd;
}
.gamename{
height: 100%;
width: 60%;
float:left;
padding: 1%;
}
.gamename>b{
display: inline-flex;
font-size: 0.8em;
}
.gamename>b>h6{
font-size: .8em;
color: #686868;
}
.gamename>p {
font-size: 0.7em;
font-weight: lighter;
}
.result {
height: 100%;
width: 30%;
float: right;
padding: 1%;
}
.result b,.result p {
float: right;
}
.result b {
font-size: 0.8em;
}
.result p {
font-size: 0.7em;
font-weight: bold;
color: #024771;
}
Это пользовательский интерфейс моей карты с отзывчивым :
Нереагирующая карта :