CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
neptune
neptune

Reputation: 1261

Div with fixed position in a scrollable modal

I have a div in a modal with scroll that should have fixed position relative to the browser window, and should not scroll away with the modal.

I tried position:fixed, but it doesn't work. Here you can see issue in it's context:

$('.launchConfirm').on('click', function (e) {
    $('#confirm').modal({
        show: true
    });
});
@import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css' );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<div class="page-container">
    <div class="container">
        <br />
        <button type="button" class="btn launchConfirm">Open modal</button>
    </div>
</div>
<div class="modal fade" id="confirm">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                 <h4 class="modal-title">Modal title</h4>

            </div>
            <div class="modal-body">
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <div style="position:fixed;top:40px;left:10px;background-color:red">This div should be fixed<br>and should not scroll away.</div>
            </div>
            <div class="modal-footer">
                some random buttons
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

How could I fix that div?

Upvotes: 6

Views: 29834

Answers (5)

Wale
Wale

Reputation: 109

to have a fixed div in a modal, do this:

<div class="modal fade" role="dialog">

    <div class="fixed-div">
        *your fixed div here...
        it can even be your .modal-header div*
    </div>

    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">

CSS:

.fixed-div {
    width: 100%;
    position: fixed;
    z-index: 1051; /* anything above 1050*/
    background: #fff;
    box-shadow: 0 5px 20px 4px rgba(0,0,0,.1);
}

.fixed-div can be your .modal-header as well; but the .modal-header must be after .modal not after .modal-content

Upvotes: 2

neptune
neptune

Reputation: 1261

I managed to resolve the issue based on answers by @Shiplo Rahman and @Dejan.S

Removed the modal-header, put everything in modal-body and doing a jquery workaround described here: jQuery: Fix div when browser scrolls to it

$('.launchConfirm').on('click', function (e) {
    $('#confirm').modal({
        show: true
    });
});

jQuery(function($) {
  function fixDiv() {
    var $cache = $('#getFixed');
    if ($('.modal-body').scrollTop() > 50)
    {
    $cache.css({
        'position': 'fixed',
        'top': '0px',
        'left': '25px',
        'width': '600px'
      });
    }
    else
      $cache.css({
        'position': 'relative',
        'top': 'auto',
        'left': '10px'
      });
  }
  $('.modal-body').scroll(fixDiv);
  fixDiv();
});
    @import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css' );
.modal-open .modal {
   //overflow: hidden;
 }
 .modal-body {
   height: calc(100vh - 126px);
   overflow-y: scroll;
 }
 
 #getFixed {
   position: relative;
   left: 10px;
   width: 600px;
 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>


<div class="page-container">
    <div class="container">
        <br />
        <button type="button" class="btn launchConfirm">Open modal</button>
    </div>
</div>
<div class="modal fade" id="confirm">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body" id="confirm2">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                 <h4 class="modal-title">Modal title</h4>
                 <div id="getFixed" style="background-color:red">This div should be fixed<br>and should not scroll away.</div>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
            </div>
            <div class="modal-footer">
                some random buttons
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

Here is the source: http://jsfiddle.net/roahda03/21/

Upvotes: 2

Sofiqul Islam
Sofiqul Islam

Reputation: 115

You can use like this.

$('.launchConfirm').on('click', function (e) {
    $('#confirm').modal({
        show: true
    });
});
@import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css' );
.modal-open .modal {
   overflow: hidden;
 }
 .modal-body {
   height: calc(100vh - 126px);
   overflow-y:scroll;
 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<div class="page-container">
    <div class="container">
        <br />
        <button type="button" class="btn launchConfirm">Open modal</button>
    </div>
</div>
<div class="modal fade" id="confirm">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                 <h4 class="modal-title">Modal title</h4>

            </div>
            <div class="modal-body">
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <p>One fine body&hellip;</p>
                <div style="position:fixed;top:40px;left:10px;background-color:red">This div should be fixed<br>and should not scroll away.</div>
            </div>
            <div class="modal-footer">
                some random buttons
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

Upvotes: 4

hungerstar
hungerstar

Reputation: 21725

You will need to move the DIV outside of the modal.

Fixed positioning works in relation to the viewport except when an ancestor element has a transform applied to it. .modal-dialog has transform applied to it which creates a new context in which to position the DIV (this is why your DIV stays inside of the modal).

CSS Positioning - MDN

Upvotes: 7

kiwi1342
kiwi1342

Reputation: 1389

In the modal-body you should set a max-height and then tell to overflow so:

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

Upvotes: -1

Related Questions