How to set specific height in Ng-Particles?

[João Caldeira]

The standard css that works for particles.js isn't working for tsparticles.

I've set the fullScreen option to false in the config:

fullScreen: {
    enable: false,
    zIndex: 0
},

Calling the ng-particles in the template like this:

<ng-particles
    id="tsParticles"
    [options]="tsParticlesConfig"
    [particlesInit]="particlesInit"
></ng-particles>

And css this way doesn't work:

#tsParticles {
  height: 1000px !important;
}

For some reason the canvas that is inside the ng-particles component gets set with an attribute of height "148".

Any help on this or any working example where the animations only work in the first 900px for example.

[Matteo Bruni]

https://codesandbox.io/p/sandbox/great-galois-w6gr25?file=%2Fsrc%2Fapp%2Fapp.component.ts%3A21%2C6

options = {
    fullScreen: {
      enable: false,
    },
    background: {
      color: '#f00',
    },
    style: {
      height: '1000px',
    },
  };

[João Caldeira]

https://codesandbox.io/p/sandbox/great-galois-w6gr25?file=%2Fsrc%2Fapp%2Fapp.component.ts%3A21%2C6

options = {
    fullScreen: {
      enable: false,
    },
    background: {
      color: '#f00',
    },
    style: {
      height: '1000px',
    },
  };

Oh wow, that's exactly what I wanted, thanks a lot for the quick and clear reply!