Bootstrap 3 Modal window with Affix?

Question

Im trying to build a modal window with bootstrap 3 that will work as an "ImageViewer" where the user can scroll large images vertically.

On the left side of this ImageViewer, I would like to have small thumbnails of the images affixed so the user always can quickly jump between the images in the gallery. I have tried to do this in a simple html page and it works all fine, but as soon as i put the very same html code in a modal window the affix stops working.

<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Launch demo modal</a>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Modal title</h4>
            </div>
            <div class="modal-body">
                <div class="container">
                    <div class="row">
                        <div class="col-md-3">
                            <!-- This div container should be affixed when scrolling the images -->
                            <div class="sidebar affix">
                                <a href="#img1">
                                    <img src="//placehold.it/50x50/2255EE/EEE&text=1" alt="" /></a>
                                <a href="#img2">
                                    <img src="//placehold.it/50x50/2255EE/EEE&text=2" alt="" /></a>
                                <a href="#img3">
                                    <img src="//placehold.it/50x50/2255EE/EEE&text=3" alt="" /></a>

                            </div>
                        </div>

                        <div class="col-md-9" role="main">
                            <img id="img1" src="//placehold.it/600x450/2255EE/EEE&text=1" class="img-responsive" style="margin: 5px" alt="" />
                            <img id="img2" src="//placehold.it/600x450/2255EE/EEE&text=2" class="img-responsive" style="margin: 5px" alt="" />
                            <img id="img3" src="//placehold.it/600x450/2255EE/EEE&text=3" class="img-responsive" style="margin: 5px" alt="" />
                            <img id="img3" src="//placehold.it/600x450/2255EE/EEE&text=3" class="img-responsive" style="margin: 5px" alt="" />
                            <img id="img3" src="//placehold.it/600x450/2255EE/EEE&text=3" class="img-responsive" style="margin: 5px" alt="" />
                            <img id="img3" src="//placehold.it/600x450/2255EE/EEE&text=3" class="img-responsive" style="margin: 5px" alt="" />
                            <img id="img3" src="//placehold.it/600x450/2255EE/EEE&text=3" class="img-responsive" style="margin: 5px" alt="" />
                            <img id="img3" src="//placehold.it/600x450/2255EE/EEE&text=3" class="img-responsive" style="margin: 5px" alt="" />
                            <img id="img3" src="//placehold.it/600x450/2255EE/EEE&text=3" class="img-responsive" style="margin: 5px" alt="" />

                        </div>
                    </div>

                </div>
            </div>

        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>    

I have created a fiddle here: http://jsfiddle.net/R8D2v/

Can anyone help out?

Best Regards Niclas

Answer 1

You can set a defined height on the area that you want to be scrollable:

    .row{
        height: 600px;
        }
    .col-md-9{
        height:600px;
        overflow-y:scroll;    
    }

And the fiddle: http://jsfiddle.net/R8D2v/1/

Answer 2

You don't add the class affix manually. The affix function works by toggling the classes .affix, .affix-top, and .affix-bottom as you fulfill the 'data-offset-top' or 'data-offset-bottom' parameters.

Manually assigning the affix class is functionally setting position fixed on the element, which is why when not using a modal it doesn't move. Of course, it will /never/ move because there is no logic to its positioning.

The appropriate affix syntax can be found on the bootstrap site .

<div data-spy="affix" data-offset-top="200">...</div>

Unfortunately when you are scrolling it is not the document, but rather through the overflow's modal. My guess is affix monitors the former. I created some jquery which mimics the behavior in this edited fiddle . By inspecting the page you can see that the .affix class is added to .sidebar when you scroll past a point defined in the jquery. I leave it to you to position the element appropriately (use position:fixed).

$('.modal').on('scroll', function(){
    var someThreshold = 60;

    if ($('.modal').scrollTop() > someThreshold) {
       $('.modal .sidebar').addClass('affix');
    }
    else {
       $('.modal .sidebar').removeClass('affix');
    }
});

On a side note: When posting a fiddle make sure you use 'col-xs-*' as using 'col-md-*' causes the elements to collapse into a single column in the inevitably narrow 'results' pane.

Answer 3

Try to add some style for modal.

style="position:absolute;overflow:hidden"

Demo