Search code examples
javascriptcssangularparticles

Particles.js creates unclickable screen in Angular 2

I am having an issue with Particles.js.

Whenever I load in particles, the search-box becomes un-clickable (I can still select it by tabbing to it).

Below is an example of the problem

searchbox unclickable feelsbad The searchbox is un-selectable

Here is how I load in Particles in my:

index.html

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Title</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>

<body>
  <app-root></app-root>
  <div id="particles-js" style="position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; z-index: 0;"> </div>
  <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
</body>
</html>

And I load it in my page here, in my:

landingpage.component

  ngOnInit(): void {
    //particles
    particlesJS.load('particles-js', 'particles.json', null);
  }

There are no errors when I run the page, so I'm not sure what's going wrong. I know it's possible to fix, because https://rocket.chat/ seems to do what I'm attempting, and it works fine.

How can I fix the particles so that I can select page elements?

Solution

  • found the problem

    I needed to set the z-index in my landingpage container to higher than that of the z-index in my index.html

    <body>
  <app-root></app-root>
  <div id="particles-js" style="position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; z-index: 0;"> </div>
  <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
</body>

    And I set my contentContainer div to z-index: 5

    <div class="landingpageContainer">
  <div class="background" [ngStyle]="{'background-image':'url(' + backgroundPlaceholder.info.name + ')'}">
    <div class="contentContainer" style="z-index: 5;">
      <img width="300" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo="
      />
      <h1>Enter a show</h1>
      <div class="inputBoxArea">
        <input type="text" class="inputArea" placeholder={{backgroundPlaceholder.info.placeholderText}} [(ngModel)]="keystroke" (ngModelChange)="getKey($event)">
      </div>
      <div class="resultListArea">
        <ol>
          <li (click)="setTitle(list)" [routerLink]="['/details', list.id]" *ngFor="let list of shows"> <img class="liPosters" src="https://image.tmdb.org/t/p/w92/{{list.poster}}" />
            <div class="title">{{list.show}}</div> (
            <div class="year">{{list.year}}</div>)
          </li>
        </ol>
      </div>
    </div>
  </div>