0

How can I make a CSS transform work with a react component? The user presses a div (side-nav-4a) below, and it renders a component in another sibling component. The CSS transform causes nothing to render. Removing the transform in CSS will render the component.

CSS

side-nav-4a {
  grid-column: 1 / span 1;
  grid-row: 17 / span 4;
  background: #EFF0F0;
  font-family: 'Lato', sans-serif;
  font-size: medium;
  transition: background 0.2s ease;
  color: #757575;
  text-align: center;
  min-width: 11.4rem;

  &:hover, &:focus {
    background: #DADBDB;
    cursor: pointer;
  }

  //&:active {
  //  transform: scale(.97);
  //  z-index: -1;
  //}
}

.openings-feesA-key {
  text-align: center;
  vertical-align: middle;
  line-height: 10rem;
}

Clicked div (React component):

import React from "react";

export default class SideBar4a extends React.Component {
  render() {
    const date = new Date().getFullYear();
    return (
      <div onClick={this.props.setOpeningsAndFeesA} className='openings-feesA-key'>
        <h3>FEES {date}</h3>
      </div>
    );
  }
}

React component that renders:

import React from 'react';

export default () => {
  return (
    <div className='intermezzi-content'>
      <p>some intermezzi content</p>
    </div>
  )
}
flimflam57
  • 1,334
  • 4
  • 16
  • 31
  • well a z-index of -1 would stack the element at the back. Try changing it to 999? – floor Apr 09 '18 at 16:05
  • That does fix it, but doesn't the z-index only affect the clicked div? Why is it affecting the rendered component? I actually need the z-index: -1 on the clicked div (the way that div looks, it needs to be behind when active since there's an overlapping div over it). – flimflam57 Apr 09 '18 at 16:19
  • I don't exactly know what you mean. Could you be more descriptive. If you are talking about the div with class openings-feesA-key then give is a higher z-index than your side nav you don't need to use 999 you could try 10 and 20. You might need to apply a different class to adjust the z-index on click. Or is there even a need to use z-index? – floor Apr 09 '18 at 16:50
  • I did fix it, but I'm still scratching my head. The div the user clicks on has className openings-feesA-key. That's the component that has the transform and z-index. My understanding is that the transform will affect ONLY the openings-feesA-key div, so when the user presses, it will scale down slightly and force it to stay behind another div that overlaps it. If I remove the z-index, when pressed it will pop over the overlapped div (not what I need). But it also means that the component (className='intermezzi-content') doesn't render as a result. These seem unrelated. – flimflam57 Apr 09 '18 at 17:13
  • My fix was to take the overlapped div (the one that overlap the openings-feesA-key div) and insert a position: relative; and z-index: 1 to force them to always be on top. That way I could remove the z-index on the clicked div altogether. But why the rendered div was affected is strange. – flimflam57 Apr 09 '18 at 17:15
  • Ya thats pretty much what this question: https://stackoverflow.com/questions/16057361/how-to-make-child-element-upper-than-parent-with-z-index says to do. – floor Apr 09 '18 at 17:17

0 Answers0