'Having some trouble with particle JS pushing elements to the side

I've imported particle JS into this html file and other files, instead of the particles being in the background the canvas pushes the other elements to the left of the webpage,can anyone help me out with it? Not sure what I am doing wrong in the css and or html perhaps I need to change the class of the canvas element? Thanks in advance.

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Quiz - Play</title>
    <link rel="stylesheet" href="style.css" />
    <script src="/particles.min.js"></script>
    <link rel="stylesheet" href="game.css" />
  </head>
  <body id="particles-js" class="canvas">
    <div class="container">
      <div id="loader"></div>
      <div id="game" class="justify-center flex-column hidden">
        <div id="hud">
          <div id="hud-item">
            <p id="progressText" class="hud-prefix">Question</p>
            <div id="progressBar">
              <div id="progressBarFull"></div>
            </div>
          </div>
          <div id="hud-item">
            <p class="hud-prefix">Score</p>
            <h1 class="hud-main-text" id="score">0</h1>
          </div>
        </div>
        <h2 id="question"></h2>
        <div class="choice-container">
          <p class="choice-prefix">A</p>
          <div class="choice-text" data-number="1"></div>
        </div>
        <div class="choice-container">
          <p class="choice-prefix">B</p>
          <div class="choice-text" data-number="2"></div>
        </div>
        <div class="choice-container">
          <p class="choice-prefix">C</p>
          <div class="choice-text" data-number="3"></div>
        </div>
        <div class="choice-container">
          <p class="choice-prefix">D</p>
          <div class="choice-text" data-number="4"></div>
        </div>
      </div>
    </div>
    <script src="/game.js"></script>
    <script src="/particles.js"></script>
    <script src="/app.js"></script>
  </body>
</html>

CSS

.choice-container {
  display: flex;
  margin-bottom: 0.5rem;
  width: 100%;
  font-size: 1.8rem;
  border: 0.1rem solid rgb(86, 165, 235, 0.25);
  background-color: white;
}

.choice-prefix {
  padding: 1.5rem 2.5rem;
  background-color: var(--color-sec);
  color: white;
}

.choice-text {
  padding: 1.5rem;
  width: 100%;
}

.choice-container:hover {
  cursor: pointer;
  box-shadow: 0 0.4rem 1.4rem 0 rgba(86, 185, 235, 0.5);
  transform: translateY(-0.1rem);
  transition: transform 150ms;
}

.correct {
  background-color: #28a745;
}

.incorrect {
  background-color: #dc3545;
}

/* HUD */

#hud {
  display: flex;
  justify-content: space-around;
}

.hud-prefix {
  text-align: center;
  font-size: 2rem;
}

.hud-main-text {
  text-align: center;
}
#progressBar {
  width: 20rem;
  height: 4rem;
  border: 0.3rem solid #56a5eb;
  margin-top: 1rem;
}

#progressBarFull {
  height: 3.4rem;
  background-color: #56a5eb;
  width: 0%;
}

/* LOADER */

#loader {
  border: 1.6rem solid white;
  border-radius: 50%;
  border-top: 1.6rem solid #56a5eb;
  width: 12rem;
  height: 12rem;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
javascripthtmlcssparticlesparticles.jsreporting-servicesssrs-2008ssrs-2012


Solution 1:[1]

If your Intervene and Leave are fields in your dataset, you would use the field values liek you did with Actual_Duration.

=SUM(IIF(Fields!Actual_Duration.Value >= 10, Fields!Intervene.Value, Fields!Leave.Value))

The will add the SUM the Intervene values when the Actual Duration is >= 10 along with the Leaves values when Actual Duration is < 10.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Hannover Fist

Related Questions