Why after hiding an element there is an empty space?

Question

In the header I try to make a drop-down menu, but there is a problem - in the hidden state, there is an empty space. How to fix it not using property display: none (because using animation in this case is not possible)? If I set the bottom of the header (bottomNavBar) to a fixed height, then there are problems on screens with small size.

return (
    <div className={`${style.bottomNavBar}`}>
        <Container fluid={true} className={style.container}>
            <Row>
                <Col sm={12} md={2}>
                    <div className={style.allCategories} onClick={() => openCloseTabs()}>
                        <h5>Все категории</h5>
                    </div>
                </Col>
                 <Col sm={12} md={10}>
                    <SimpleSlider/>
                </Col>
            </Row>
        </Container>
        <div className={`${style.tabsPanel} ${tabsPanelVisible ? style.tabsPanelOpen : style.tabsPanelHidden}`}>

        </div>
    </div>
)
};

CSS:

    .bottomNavBar {
        background-color: rgb(50, 148, 63);
    }
    .container {
    }
    .allCategories {
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        cursor: pointer;
    }
    .allCategories:hover {
        text-shadow: 4px 4px 2px rgba(255, 255, 255, 0.6);
    }  
   .tabsPanel {
        min-height: 200px;
        border: 5px solid rgb(50, 148, 63);
        background-color: grey;
        width: 100%;
    }
    .tabsPanelHidden {
        height: 0;
        overflow: hidden;
        visibility: hidden;
        opacity: 0;
        transform: translate3d(0, -30px, 0);
        transition: visibility 0s ease-in .15s, opacity .15s ease-in, transform .15s ease-in;
    }
    .tabsPanelOpen {
        visibility: visible;
        opacity: 1;
        transform: translate3d(0, 0, 0);
        transition: visibility 0s ease-out, opacity .25s ease-out, transform .25s ease-out;
    }

can you please generate snippet – KuldipKoradia Nov 14 '19 at 10:59 — KuldipKoradia, Nov 14 '19 at 10:59
ok, in few minutes – Слава Иванов Nov 14 '19 at 11:02 — Слава Иванов, Nov 14 '19 at 11:02

score 4 · Answer 1 · answered Nov 14 '19 at 11:00

4

That's because you're using visibility:hidden; You should use display: none; Please take a minute to read the differences on this question

answered Nov 14 '19 at 11:00

gugateider

1,983
2
13
17

i know about `display: none;`, but animation is not applicable to this property – Слава Иванов Nov 14 '19 at 11:01
3

The animation was not on the scope of the question, edit or create a new question describing what your animation issue is. – gugateider Nov 14 '19 at 11:03

Why after hiding an element there is an empty space?

1 Answers1