CODEWITHSUNDEEP
htmltwitter-bootstrap
Onez
Onez

Reputation: 91

Bootstrap collapse move rest of html body

I use bootstrap and make collapse but every time I click on it rest of body go down/up. Is it possible to don't move rest of body? This is my example code:

<body>
    <div class="panel-group">
        <div class="panel panel-default">
            <div id="collapse1" class="panel-collapse collapse">
                <div class="panel-body">Panel Body</div>
                <div class="panel-footer">Panel Footer</div>
            </div>
            <div class="panel-heading">
                <h4 class="panel-title"><a data-toggle="collapse" href="#collapse1">Collapsible panel</a></h4>
            </div>
        </div>
    </div>
</body>

Upvotes: 1

Views: 1801

Answers (1)

Juan Venter
Juan Venter

Reputation: 143

The reason for this is that your parent container's height is auto. So it will basically resize if the child containers are resized.

Set the parent's height. Either programmatically to a fixed height, or you can set it to a % of the page height or whatever. Below would make it 100% of page height:

.panel-group
 {
   height:100vh;
 }

Example here

Upvotes: 1

Related Questions