-1

I have tiled four cards 2 x 2 with react-bootstrap Row and Col. On click each expands and moves slightly up via framer-motion. But I'd like each to position in the center or top left on a click. I think the relative positioning in the bootstrap is preventing this. Is there any way around this? Any way to keep the Rows and Cols, but to position the cards on click totally absolutely?

So far my solution is to give an id to each element after click, and to give each id a different top %, etc. But this seems messy.

setInterval
  • 39
  • 4

1 Answers1

1

You would need JavaScript for that. You could try adding a css class to the element with document.queryselector('.your-element-class').classList.add('some-class') that overrides position relative with something like this:

.some-class { 
  position: absolute;
  top: 15%;
  left: 15%;
  z-index: XX; /* for example '2' or '99' if needed */
}

On closing the element, use classList.remove(...) to remove the overriding CSS class, and your element will jump back into the regular HTML flow. Consider how to handle scrolling. You can prevent vertical scroll while the some-class is active by adding vertical-scroll-y: hidden; or you could use position:fixed; instead so the element doesn't move when scrolling the rest of the content.

anatolhiman
  • 931
  • 1
  • 6
  • 12
  • Thank you for this. I'm using React. I think your idea is similar to mine? I think each card would then need its own class with different top, left, etc, given their different positions. It seems the kinda thing that there *should* be a simple css positioning for :( – setInterval Jan 22 '21 at 03:01
  • 1
    Yes, same basic idea. Except that I would use a CSS class and not an ID to interact with the JS (you would to that with refs, probably), and different top positions seem redundant unless you really want each of them in a different location on the screen? I would use one single class to make sure they all go into the same position, and make sure to remove the override CSS class if another card is clicked so you don't get more than one element in the same position. – anatolhiman Jan 22 '21 at 03:11
  • Thank you, again. I wonder re the same class: Since each is already differently located in a differently located parent, i was thinking i'd need to position each individually, moving each absolute relative to its parent. Will try! – setInterval Jan 22 '21 at 03:41
  • If you use position:absolute you'd be able to put them in the same spot near the top of the page, relative to the full window and completely independent of the parent elements. – anatolhiman Jan 22 '21 at 05:12