Div with fixed position in a scrollable modal

Question

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?

@Dejan.S the fixed div will contain some buttons related to the form in the modal, which are right now at the bottom. — neptune, Jan 30 '17 at 13:58

score 6 · Answer 1 · answered Jan 30 '17 at 13:54

6

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

answered Jan 30 '17 at 13:54

hungerstar

21,206
6
50
59

1

He is right. Try to place that DIV under the `
– Ukasha Feb 27 '18 at 03:42

score 4 · Answer 2 · answered Jan 30 '17 at 14:23

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 -->

I don't need the title to be fixed. Although, you gave me an idea and managed to solve the problem. Thanks — neptune, Jan 30 '17 at 15:20

score 2 · Accepted Answer · edited May 23 '17 at 12:24

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/

score 2 · Answer 4 · answered Jan 22 '19 at 16:24

2

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

answered Jan 22 '19 at 16:24

Wale

89
5

What's up with the 1050? – AlxVallejo Feb 10 '19 at 16:49
The `z-index` value of bootstrap modal is `1050`. If you want any element to stay visible on top of the modal, you gotta use `z-index` value above `1050` – Wale Feb 12 '19 at 04:12

score -1 · Answer 5 · answered Jan 30 '17 at 13:44

-1

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

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

answered Jan 30 '17 at 13:44

kiwi1342

1,349
4
15
23

I don't want the title to be fixed, just the div. – neptune Jan 30 '17 at 13:47
ah ok, then you should place the div outside the modal or at least outsitde the .modal-content div – kiwi1342 Jan 30 '17 at 13:52

Div with fixed position in a scrollable modal

5 Answers5