CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
Dan
Dan

Reputation: 597

Why does the width of affix column change while scrolling in Bootstrap?

In Bootstrap I made two columns one with affix to make it fixed while scrolling and one normal column. Here is the demo

This is my code so far:

<body data-spy="scroll" data-target="#myScrollspy">
<div class="container">
    <div class="row">
        <div class="col-md-3" id="myScrollspy">
            <div class="panel panel-default" data-spy="affix" data-offset-top="0">
                <div class="panel-body">Lorem ipsum</div>
            </div>
        </div>
        <div class="col-md-9">
            <div class="panel panel-default">
                <div class="panel-body">
                    <p>Lorem ipsum </p>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

If you check the demo, as soon as you scroll down, the width of the small column which has affix changes. Why is that?

Is there any idea to fix it? Thanks

Upvotes: 0

Views: 901

Answers (1)

Michael Voronin-Labunsky
Michael Voronin-Labunsky

Reputation: 301

Because when the small column hits the top of the window, it's position property is set to fixed. If an element is fixed positioned, it is taken out of the normal flow of the page. So, it fills as much space as it need. You have to set the width for the small column when it becomes fixed.

Upvotes: 2

Related Questions