Question

问题是，当我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;
}

这是我的具有响应式卡片的UI ：

感应卡：

当我从网站路线沿不同路线行驶时，页面无响应，该如何解决？

0 个答案: