HTML элементов не на месте при их осмотре - PullRequest
Новая
       16

HTML элементов не на месте при их осмотре

0 голосов
/ 27 февраля 2020

Вот картина вопроса. Просто изобразите мою мышь как нарисованную красную мышь, поскольку экран печати не захватывает мышь.

По некоторым причинам элемент выделяется, даже если мышь не находится непосредственно на нем.

My issue

Кто-нибудь испытывал что-то подобное? Есть идеи, что проблема может быть здесь?

РЕДАКТИРОВАТЬ Вот код 

    <div class="d-flex flex-column teamCard">
      <p class="teamCardHeading">Best performing teams</p>
      <div class="cardRow d-flex flex-row flex-wrap">
        <BestTeamCardComponent />
        <BestTeamCardComponent />
        <BestTeamCardComponent />
        <BestTeamCardComponent />
        <BestTeamCardComponent />
      </div>
    </div>

--- CSS ----- 

.teamCard {
  width: 992px;
  border-radius: 16px;
  padding: 32px 24px 32px 24px;
  background-color: white;
  margin-bottom: 24px;
}

.teamCardHeading {
  font-family: Averta-Bold;
  font-size: 24px;
  line-height: 32px;
  color: #203767;
  margin-bottom: 24px;
}

.cardRow {
  width: 992px;
  margin-bottom: 24px;
}

@media only screen and (max-width: 480px) {
  .cardRow,
  .teamCard {
    width: 345px;
  }

  .teamMetricRow {
    width: 300px;
  }

  .goalProgress,
  .progressBar,
  .progressMade {
    display: none;
  }

  .teamMetricRowPoints {
    transform: translateX(-0px);
  }
}

BestTeamCardComponent 

<template>
  <div class="bestTeamMetric d-flex flex-column">
    <p class="bestTeamMetricHeading">{{title}}</p>
    <div
      v-for="(rec, index) in records"
      :key="index"
      :style="{backgroundColor: index % 2 == 1 ? 'white' : '#f7f8fb'}"
      class="d-flex flex-row teamMetricRow justify-content-around"
    >
      <div class="d-flex flex-column">
        <p class="teamMetricRowTeam">{{rec.team}}</p>
        <p class="teamMetricRowMembers">{{rec.members}} members</p>
      </div>

      <p class="teamMetricRowPoints align-self-center">{{rec.points}}pts</p>

      <div class="d-flex flex-column align-self-center goalProgress">
        <div class="progressBar"></div>
        <div class="progressMade"></div>
      </div>
    </div>
  </div>
</template>

--- CSS --- 

<style scoped lang="scss">
.bestTeamMetric {
  width: 456px;
  margin-right: 35px;
  margin-bottom: 30px;
}

.bestTeamMetricHeading {
  font-family: Averta;
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 20px;
  color: #5c6170;
}

.teamMetricRow {
  width: 456px;
  //   height: 56px;
  padding-top: 8px;
}

.teamMetricRowTeam {
  font-family: Averta-Bold;
  font-size: 16px;
  line-height: 24px;
  color: #203767;
}

.teamMetricRowMembers {
  font-family: Avenir;
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  line-height: 16px;
  color: #7e88a1;
}

.teamMetricRowPoints {
  font-family: Averta;
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 20px;
  color: #203767;
}

.goalProgress {
  margin-bottom: 16px;
  transform: translateX(-50px);
}

.progressBar {
  position: absolute;
  width: 192px;
  height: 3px;
  z-index: 1;
  background: #f6f7ff;
  border-radius: 32px;
}

.progressMade {
  width: 120px;
  height: 3px;
  z-index: 2;
  background: #2ab2ff;
  border-radius: 32px;
}

@media only screen and (max-width: 480px) {
  .bestTeamMetric {
    width: 345px;
  }

  .teamMetricRow {
    width: 300px;
  }

  .goalProgress,
  .progressBar,
  .progressMade {
    display: none;
  }
}

1 Ответ

0 голосов
/ 27 февраля 2020

Я буквально не знаю как, но сейчас все работает хорошо. Были некоторые кнопки, которые нажимались примерно на 100 пикселей выше, чем они были на самом деле, однако они также работают сейчас. Я часто сталкиваюсь с неясными ошибками ... Я не изменял никакие стили CSS, похоже, это была проблема с браузером в веб-инспекторе / консоли

...