Responsive canvas Bug

[pranav2012]

after viewport width is 844px the particle js div expands more than the page height

[matteobruni]

Hi @pranav2012,

Can you share more details and some code to reproduce the issue?

[pranav2012]

Sure, here is a gif file showing the bug

[matteobruni]

Can you share some code? I can't reproduce the issue only from a gif

https://codesandbox.io/s/nervous-ellis-m64l9?file=/src/styles.css

Is this code sandbox also affected?

[pranav2012]

App.jsx

import React, { Component } from 'react';
import '../styles/App.css';
import Particles from 'react-particles-js';
import Out from './Out';
import Social from '../Components/social';
import Nomatch from '../Components/404';
import { BrowserRouter as Router, Route, Switch, Redirect } from "react-router-dom";
import Dashboard from '../Components/MainApp/Dashboard';
import 'tachyons';

const backend_url = 'https://facerecogination-back-end.herokuapp.com';

const particles_options = {
  particles: {
    number: {
      value: 140,
      density: {
        enable: true,
        value_area: 1000
      }
    }
  }
}

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      signclick: localStorage.getItem('state') || 'loggedout',
      user: {
        name: localStorage.getItem('username'),
        id: localStorage.getItem('id'),
      }
    }
  }

  loaduser = (user) => {
    this.setState({
      user: {
        name: (user.username.split(' ').length <= 1) ? user.username : user.username.split(' ').slice(0, -user.username.split(' ').length + 1).join(' '),
        id: user.id
      }
    }, () => {
      localStorage.setItem('username', (user.username.split(' ').length <= 1) ? user.username : user.username.split(' ').slice(0, -user.username.split(' ').length + 1).join(' '));
      localStorage.setItem('id', user.id);
    });
  }

  signout = (route) => {
    if (route === 'loggedout') {
      this.setState({
        signclick: 'loggedout'
      }, () => {
        localStorage.setItem('state', this.state.signclick);
      });
    }
    if (route === 'home') {
      this.setState({
        signclick: 'home'
      }, () => {
        localStorage.setItem('state', this.state.signclick);
      });
    }
  }

  logout = () => {
    this.signout('loggedout');
    localStorage.clear();
  }

  render() {
    return (
      <Router>
        <div className='App'>
          <Particles params={particles_options} className='particles' canvasClassName='canvas-p'/>
          <Switch>
            <Route exact path='/'>
              {this.state.signclick === 'loggedout' ? <Redirect to='/' /> : <Redirect to={'/dashboard/' + this.state.user.id} />}
              <Out loaduser={this.loaduser} logout={this.logout} signclick={this.signout} backend_url={backend_url} />
            </Route>
            <Route exact path='/dashboard/:id'>
              {this.state.signclick === 'home' ? <Redirect to = {'/dashboard/'+ this.state.user.id} /> : <Redirect to='/' />}
              <Dashboard logout={this.logout} user={this.state.user}/>
            </Route>
            <Route>
              <Nomatch />
            </Route>
          </Switch>
          <Social/>
        </div>
      </Router>
    );
  }
}

export default App;

CSS footer css:

.social{
    width: 100%;
    background: #043361;
    height: 15vh;
}

particle css:

.particles{
    position: fixed;
    top:0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    overflow: hidden;
}

[matteobruni]

I cannot run that code, some files are missing:

import Out from "./Out";
import Social from "../Components/social";
import Nomatch from "../Components/404";
import Dashboard from "../Components/MainApp/Dashboard";

[pranav2012]

here is the GitHub repo: https://github.com/pranav2012/CryptoSathi

[matteobruni]

It seems a bad positioning of the .social div, particles are working correctly with their configuration.

The .particles div has position fixed in the css, and with top, left, bottom, right set to 0 they will fill 100% of the document, but .social is not set to be always on the bottom.

If you want to set the particles inside the #root div you need to change the css.

[pranav2012]

If i make particles not fixed it goes to the top of header

[matteobruni]

You can set #root with position: relative and .particles with position: absolute or fix the footer to be always at the page bottom

[pranav2012]

Ok thanks for you help 😊