1

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>

  • jsfiddle not working – Miguel Ike Sep 21 '15 at 14:16
  • please chk now. sorry for error –  Sep 21 '15 at 14:16
  • Possibly related to http://stackoverflow.com/questions/16670931/hide-scroll-bar-but-still-being-able-to-scroll – mcclaskiem Sep 21 '15 at 14:18
  • 1
    just show the scrollbar by default with css: `overflow-y: auto;` That will stop the jumping... – WhiteHat Sep 21 '15 at 14:19
  • yaa may b its duplicate. but still there is no proper and easy solution. Im sure. Overflow hidden is not solution. I need to show scrollbar when data is overflowed. –  Sep 21 '15 at 14:25
  • This is a very frequently asked question. Your options are to either show the scrollbar all the time, try to roll your own non-native scrollbar (not recommended), or just live with the jump. (Note that this depends on platform and browser -- on OS X all scrollbars overlap the content rather than pushing it over to make room) – Daniel Beck Sep 21 '15 at 16:28

2 Answers2

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;
kamus
  • 797
  • 1
  • 6
  • 15
  • now its shows scrollbar on Panel. which is not required. Also when I resize the window height. there is still problem. I think there is no solution. –  Sep 21 '15 at 15:29
  • The scrollbar inside the panel is to avoid the jump in the page, if you dont want to see the page jumping,you will need to hide a scrollbar and implement your own scroll system or use a plugin to get a custom scrollbar to avoid the jump http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/complete_examples.html – kamus Sep 21 '15 at 15:34
0
.bs-example {
    position: relative;
}
.panel-group {
    position: absolute;
    left: 0;
    top:0;
    width:100%;
    height:100%;
    z-index: 9;
}
Jason Yost
  • 4,807
  • 7
  • 42
  • 65
Asma Ferdose
  • 1
  • 1