Twitter Bootstrap Question posted in

Twitter bootstrap – page jumps on scrollbar show and hide

I have sample code in jsfiddle. the problem is when I click on heading 1 and it opens the panel. but the content is too long so it suddenly shows the scrollbar. Also when I collapse it then page sudden hide the scrollbar back.

during this scrollbar show and hide. page looks like jumping.

either I can hide and show with animation like smooth(I think not possible I have tried) or anything else. please help me to find the solution.

demo

<div class="bs-example">
<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">1. What is HTML?</a>
            </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">
                <p>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.<br>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web Web pages.<br>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.<br>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.<br>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.<br>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.<br>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.<br>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.<br>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.<br>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.<br>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.<br>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.<br>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.<br>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.<br>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.<br>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.<br>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.<br>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.<br>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.<br>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.<br>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.<br>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.<br>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.<br>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.<br>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.<br>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.<br>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.<br>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.<br>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.<br>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.<br>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.<br>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.<br>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.<br>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.<br>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.<br>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.<br>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.<br>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.<br>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.<br>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.<br>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.<br>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.<br>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.<br>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.<br> <a href="http://www.tutorialrepublic.com/html-tutorial/" target="_blank">Learn more.</a></p>
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">2. What is Bootstrap?</a>
            </h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse">
            <div class="panel-body">
                <p>Bootstrap is a powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions. <a href="http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/" target="_blank">Learn more.</a></p>
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">3. What is CSS?</a>
            </h4>
        </div>
        <div id="collapseThree" class="panel-collapse collapse">
            <div class="panel-body">
                <p>CSS stands for Cascading Style Sheet. CSS allows you to specify various style properties for a given HTML element such as colors, backgrounds, fonts etc. <a href="http://www.tutorialrepublic.com/css-tutorial/" target="_blank">Learn more.</a></p>
            </div>
        </div>
    </div>
</div>

Tags:

2

Answers


  1. 0

    You can try diferent options:

    set max height in the panel-body; http://jsfiddle.net/wtrkqx19/2/

    .panel-body{
    max-height: 200px;
    overflow: auto;
}

    or just show by default the scrollbar using 

       overflow-y: auto;
    Login or Signup to reply.
  2. 0 
    .bs-example {
    position: relative;
}
.panel-group {
    position: absolute;
    left: 0;
    top:0;
    width:100%;
    height:100%;
    z-index: 9;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search