fullscreen divs when clicked

Question

I wanted to create a masonry like layout where when you click on an div then it resizes to full screen or at least become bigger than the other divs. Something like pinterest, where when you click on an image then that image becomes bigger. but in my code, I've been able to generate random height and color for the divs but the widths of the divs are too small and when I click on it then it doesn't scale to 100% of the screen. I also want them to be toggleable, where if I click on a fullscreen div again then, it comes back to it's normal size or the random height that will be generated. what am I doing wrong in the code?

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.addActiveClass = this.addActiveClass.bind(this);
    this.state = {
      activeIndex: -1
    };
  }
  addActiveClass(activeIndex) {
    this.setState(prev => ({
      activeIndex: prev.activeIndex === activeIndex ? -1 : activeIndex
    }));
  }

  render() {
    return (
      <div className="container">
        {Array.from({ length: 30 }).map((item, index) => {
          return (
            <div
              key={index}
              style={{
                background: randomColor(colors),
                height: randomHeight(100, 200)
              }}
              className={this.state.activeIndex === index ? "full" : ""}
              onClick={() => this.addActiveClass(index)}
            />
          );
        })}
      </div>
    );
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 40px;
  background-color: #fff;
  color: #444;
  font: 2em Sansita, sans-serif;
}

.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-height: 100vh;
  align-items: flex-start
}

.container > * {
  border: 2px solid orange;
  border-radius: 5px;
  margin: 10px;
  padding: 10px 20px;
  background-color: red;
  color: #fff;
}

.full{
  width: 100%;
  height: 100%;
  transition: 2s;
}

sandbox

F. Müller · Accepted Answer · 2020-07-23T15:13:10.393

3

There might be an easier way that is already provided by the vendor. If you want to apply your custom css then you could make the element fixed when they should be full screen. Something like that:

.full {
    position: fixed;
    left: 0px;
    top: 0px;
    bottom: 0px;
    right: 0px;
    margin: 0px;
    height: 100vh !important;
    transition: 2s;
}

The height has to be overridden like this otherwise it won't work. You can make the rule more specific then you might be able to remove !important. But in this case, it should not matter too much anyway.

EDIT

To set a specific height/width for the tiles one way would be like this:

.container > * {
  width: 100px !important;
  height: 100px !important;
  ...

There might be a js-config somewhere where you can set min-height/min-width or the like with javascript. I don't know the library, therefore I would have to google it myself.

edited Jul 23 '20 at 15:13

answered Jul 23 '20 at 14:45

F. Müller

3,969
8
38
49

wow it did cover the whole screen but can you provide a solution for the masonry tiles too? cause those tiles widths look abnormal – helpmepiliizzz Jul 23 '20 at 14:57
@helpmepiliizzz I don't understand the question/request. What do you mean exactly? Can you elaborate, please. – F. Müller Jul 23 '20 at 15:02
if you looked at my sandbox then you can see the that divs are way too far apart and the widths of the divs are too small. how do I make the layout more like a normal masonry layout? – helpmepiliizzz Jul 23 '20 at 15:05
https://codesandbox.io/s/wild-snowflake-1uusp?file=/src/styles.scss – helpmepiliizzz Jul 23 '20 at 15:05
@helpmepiliizzz Either you put some content in (it will adjust the size based on the content). Or if you just want it to be colored boxes without text or images then you can adjust the width/height of the tiles (see edit). – F. Müller Jul 23 '20 at 15:11
thanks. I edited it and it seems to be working. Also is there way to add react-router on them? such that when I click on the first link then it redirects to localhost:3000/div1? and when clicked on it again then it comes back to localhost – helpmepiliizzz Jul 23 '20 at 15:17
@helpmepiliizzz I am not familiar with react, therefore I cannot tell you for sure. I know that you can redirect in javascript with window.location.href="url". You could also wrap an tag around the container. But when you redirect (page-load) or click on the link then you cannot click on it again because you are on a different page. Not sure what you are trying to do here. – F. Müller Jul 23 '20 at 15:23
@helpmepiliizzz Alright. You may want to check this out too: [masonry-options](https://masonry.desandro.com/options.html) They use `columnWidth`, `gutter` etc. if you have access to the setup you could configure it there. Instead of the hacky css. – F. Müller Jul 23 '20 at 15:42

score 2 · Answer 2 · answered Jul 23 '20 at 14:40

2

I believe that this tutorial covers completely what you want to accomplish: https://janosh.dev/blog/react-hooks-masonry

In your case you just have to expand to 100% width/height when clicked instead of the weird toggle that is implemented

answered Jul 23 '20 at 14:40

Tasos

1,880
13
19

it shows the tutorial with predefined height and colors for the tiles. can you show me how do I do it with random height and color please? – helpmepiliizzz Jul 23 '20 at 15:00
I've created a sandbox https://codesandbox.io/s/red-hooks-delhn?file=/src/App.js – helpmepiliizzz Jul 23 '20 at 15:08
1

You can add a function when you generate your array (or get it from an api) that randomises the colours and minHeights. Here is such a function for colors: https://stackoverflow.com/a/1484514/5605822 In the same way you can generate random heights – Tasos Jul 23 '20 at 15:15
I did everything as the website said but I'm getting `_hooks.useEventListener is not a function` error. can you have a look at the sandbox and figure out why it says so – helpmepiliizzz Jul 23 '20 at 15:18

fullscreen divs when clicked

2 Answers2