Search code examples
javascriptcssreactjsref

Access hidden elements width and height

I am trying to access the subcontext menu's width and height. They are styled display: none until hovered on the parent element. The structure goes as 

const Parent = styled.div`
    p{
      display:none;
    }
    &:hover{
        p{
           display:block;
           width: 200px;
           height:250px;
           overflow:auto; 
        }
    }
`
class ParentComponent extends {Component}{
    state={}

    menuRef = React.createRef(); 

    render(){
       return(
         <Parent>
           <Child menuRef={menuRef}>
         </Parent>

       )
    }
}

Since the element has display none on load, it is showing the offsetWidth and offsetHeight to be 0. Do I have to go to onMouseEnter and onMouseLeave and control the hover styling? Or is there a better way of doing this?

Solution

  • try using 

    visibility: hidden

    instead is using display